We Keep Coding

Problems with visibility of edit/save buttons for table rows (JS)

Hi I'm trying to build a table with inputs for a budget tracking app. I'm having some trouble with the JS. Essentially I want the user to be able to add, edit and save rows.
I want only the save or edit button to be visible at one time. This works after editing and saving a row, but by default it shows all buttons. Also after editing a row the buttons are no longer in line but rather stacked on top of each other.
Any help would be really appreciated. This is my first time using JS.
My Code
<div>
<!-- ... -->
<div class="five">
<h1>Transactions</h1>
<div class="txlist">
<table cellspacing="0" cellpadding="0" border="0" width="1500">
<thead>
<th>Date</th>
<th>Account</th>
<th>Category</th>
<th>Amount</th>
<th></th>
</thead>
<tbody class="txlist" id="data_table">
<tr id="addtx">
<td><input type="date" id="new_date" placeholder="Date"></td>
<td><input type="text" id="new_account" placeholder="Account"></td>
<td><input type="text" id="new_category" placeholder="Category"></td>
<td><input type="text" id="new_amount" placeholder="Amount"></td>
<td>
<input type="button" id="save_button3" value="Save" class="save" onclick="add_row();">
<input type="button" value="🗙" class="delete" onclick="nonew()">
</td>
</tr>
<tr id="row1">
<td id="date_row1">24.08.2020</td>
<td id="account_row1">Credit Card</td>
<td id="category_row1">Expense: Restaurants</td>
<td id="amount_row1">- $32.45</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edt" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="🗙" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="date_row2">24.08.2020</td>
<td id="account_row2">Cash</td>
<td id="category_row2">Transfer: Credit Card</td>
<td id="amount_row2">+ $250.00</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edt" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="🗙" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="date_row3">24.08.2020</td>
<td id="account_row3">Credit Card</td>
<td id="category_row3">Transfer: Cash</td>
<td id="amount_row3">- $250.00</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edt" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="🗙" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr id="row4">
<td id="date_row4">24.08.2020</td>
<td id="account_row4">Credit Card</td>
<td id="category_row4">Expense: Clothing</td>
<td id="amount_row4">- $84.95</td>
<td>
<input type="button" id="edit_button4" value="Edit" class="edt" onclick="edit_row('4')">
<input type="button" id="save_button4" value="Save" class="save" onclick="save_row('4')">
<input type="button" value="🗙" class="delete" onclick="delete_row('4')">
</td>
</tr>
<tr id="row5">
<td id="date_row5">23.08.2020</td>
<td id="account_row5">Cash</td>
<td id="category_row5">Expense: Groceries</td>
<td id="amount_row5">- $25.23</td>
<td>
<input type="button" id="edit_button5" value="Edit" class="edt" onclick="edit_row('5')">
<input type="button" id="save_button5" value="Save" class="save" onclick="save_row('5')">
<input type="button" value="🗙" class="delete" onclick="delete_row('5')">
</td>
</tr>
<tr id="row6">
<td id="date_row6">23.08.2020</td>
<td id="account_row6">Credit Card</td>
<td id="category_row6">Income: Salary</td>
<td id="amount_row6">+ $2500.00</td>
<td>
<input type="button" id="edit_button6" value="Edit" class="edt" onclick="edit_row('6')">
<input type="button" id="save_button6" value="Save" class="save" onclick="save_row('6')">
<input type="button" value="🗙" class="delete" onclick="delete_row('6')">
</td>
</tr>
<tr id="row7">
<td id="date_row7">23.08.2020</td>
<td id="account_row7">Checking Account</td>
<td id="category_row7">Transfer: Savings Account</td>
<td id="amount_row7">- $500.00</td>
<td>
<input type="button" id="edit_button7" value="Edit" class="edt" onclick="edit_row('7')">
<input type="button" id="save_button7" value="Save" class="save" onclick="save_row('7')">
<input type="button" value="🗙" class="delete" onclick="delete_row('7')">
</td>
</tr>
<tr id="row8">
<td id="date_row8">22.08.2020</td>
<td id="account_row8">Savings Account</td>
<td id="category_row8">Transfer: Checking Account</td>
<td id="amount_row8">+ $500.00</td>
<td>
<input type="button" id="edit_button8" value="Edit" class="edt" onclick="edit_row('8')">
<input type="button" id="save_button8" value="Save" class="save" onclick="save_row('8')">
<input type="button" value="🗙" class="delete" onclick="delete_row('8')">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var date=document.getElementById("date_row"+no);
var account=document.getElementById("account_row"+no);
var category=document.getElementById("category_row"+no);
var amount=document.getElementById("amount_row"+no);
var date_data=date.innerHTML;
var account_data=account.innerHTML;
var category_data=category.innerHTML;
var amount_data=amount.innerHTML;
date.innerHTML="<input type='date' id='date_date"+no+"' value='"+date_data+"'>"; //Should input type here be date?
account.innerHTML="<input type='text' id='account_text"+no+"' value='"+account_data+"'>";
category.innerHTML="<input type='text' id='category_text"+no+"' value='"+category_data+"'>";
amount.innerHTML="<input type='text' id='amount_text"+no+"' value='"+amount_data+"'>";
}
function save_row(no)
{
var date_val=document.getElementById("date_date"+no).value;
var account_val=document.getElementById("account_text"+no).value;
var category_val=document.getElementById("category_text"+no).value;
var amount_val=document.getElementById("amount_text"+no).value;
document.getElementById("date_row"+no).innerHTML=date_val;
document.getElementById("account_row"+no).innerHTML=account_val;
document.getElementById("category_row"+no).innerHTML=category_val;
document.getElementById("amount_row"+no).innerHTML=amount_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_date=document.getElementById("new_date").value;
var new_account=document.getElementById("new_account").value;
var new_category=document.getElementById("new_category").value;
var new_amount=document.getElementById("new_amount").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='date_row"+table_len+"'>"+new_date+"</td><td id='account_row"+table_len+"'>"+new_account+"</td><td id='category_row"+table_len+"'>"+new_category+"</td><td id='amount_row"+table_len+"'>"+new_amount+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='🗙' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_date").value="";
document.getElementById("new_account").value="";
document.getElementById("new_category").value="";
document.getElementById("new_amount").value="";
}

I think there are better ways to achieve this, but all the same, your issue is that when saving and editing you are changing the button's style.display attribute to
document.getElementById("edit_button"+no).style.display="block";
you need to retain
document.getElementById("edit_button"+no).style.display="inline-block";

The markup you shared is broken. I see 2 opening <table> tags and 3 closing </table> tags.
Can you share a correct markup or minimal working code?

javascript .innerHTML() inserts outside div

I have a table and a button, when the button is pressed it adds a new input into the table inside a div, when I add the input manually inside the div and test it it works, but when the script adds it it goes outside the table.. why is that? how can i fix this issue?
html:
..
<script> var x=0; </script>
...
<table>
<tr>
<td>From:</td>
<td><input type="text" name="from" /></td>
</tr>
<tr>
<td>To (email):</td>
<td><input type="text" name="to0" /></td>
<td><input type='button' onclick='newMail()' value='Add recipient'/> </td>
</tr>
<div id="add">
<tr>
<td>To (email):</td> <!-- this works -->
<td><input type="text" name="to0" /></td>
</tr>
</div>
<tr>
<td align="center" colspan="2"><input type="submit" value="send"></td>
</tr>
</table>
JS:
function newMail()
{
x=x+1;
var input =
" <tr>"+
" <td>To (email):</td>"+
" <td><input type='text' name='to"+x+"' /></td>"+
" </tr>";
document.getElementById("add").innerHTML += input;
}
the function works and adds the input and everything, but it goes outside the table, whilst the one inside the div that i manually added works fine and is displayed normally.

Try this one: https://jsfiddle.net/0dh52827/
JAVASCRIPT
$( document ).ready(function() {
$("#add_recipient").click( function() {
x = x + 1;
console.log(x);
var input =
" <tr>" +
" <td>To (email):</td>" +
" <td><input type='text' name='to" + x + "' /></td>" +
" </tr>";
$("#add").prepend(input);
});
});
HTML:
<script>
var x = 0;
</script>
<table id="add">
<tr>
<td>From:</td>
<td>
<input type="text" name="from" />
</td>
</tr>
<tr>
<td>To (email):</td>
<td>
<input type="text" name="to0" />
</td>
</tr>
<tr>
<td>To (email):</td>
<!-- this works -->
<td>
<input type="text" name="to0" />
</td>
</tr>
<tr>
<td align="left">
<input type="submit" value="send">
</td>
<td align="right">
<input id="add_recipient" type='button' value='Add recipient' />
</td>
</tr>
JQUERY Prepend is designed for things like this.

Check this please
function newMail() {
x = x + 1;
var input =
" <tr>" +
" <td>To (email):</td>" +
" <td><input type='text' name='to" + x + "' /></td>" +
" </tr>";
document.getElementById("add").innerHTML += input;
}
<script>
var x = 0;
</script>
<table>
<tr>
<td>From:</td>
<td>
<input type="text" name="from" />
</td>
</tr>
<tr>
<td>To (email):</td>
<td>
<input type="text" name="to0" />
</td>
</tr>
<tr>
<td>To (email):</td>
<!-- this works -->
<td>
<input type="text" name="to0" />
</td>
</tr>
<tbody id="add"></tbody>
<tr>
<td align="left">
<input type="submit" value="send">
</td>
<td align="right">
<input type='button' onclick='newMail()' value='Add recipient' />
</td>
</tr>

The element with id="add" is a <div> in a <table> (which is not properly placed but might work in some browsers). Adding code to it has at least an undefined behavior.
You should instead remove the <div> tag and give the <tr> tag the id="add" attribute and then use document.getElementById("add").appendChild() method to add a new html node. To create this node, don't use text but document.createElement() like described in MDN

Disabling certain inputs in table on button press

I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.
Does anyone know of a good way to go about this?
<tr>
<td>Text A</td>
<td>Text B</td>
<td><input class="editable"></td>
<td>Text C</td>
<td><input class="editable></td>
<td>Text D</td>
<td><button class="disableInput">OK</button></td>
<tr>
I have ~40 rows like this
Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds

$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})

Since you are using jQuery, you can do something like this:
$(document).ready(function() {
$("table td .btn").click(function() {
if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
$(this).closest("tr").find("input").removeAttr("disabled", "disabled");
$(this).closest("tr").find("button").text("Disbale");
}
else{
$(this).closest("tr").find("input").attr("disabled", "disabled");
$(this).closest("tr").find("button").text("Enable");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
</tbody>
</table>

You can do this via traversing the DOM.
$('.disableInput').on('click',function(){
var input = $(this).closest('tr').find('input');
var currstatus = input.prop('disabled');
input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
</table>

How to close the table on click in JavaScript?

I have a table which takes the user details. The code is as follows:
<table id="record" border=1>
<tr>
<td>Emp Name</td>
<td><input type="text" placeholder="Employee Name"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" placeholder="Address"></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Add">
<input type="button" value="Cancel">
</td>
</tr>
</table>
Now, when I click on the Cancel button, the table should close. How can I do this?

Just give the input button an id...
<input type="button" id="close" value="cancel">
Then add some Jquery...(assuming you are using jquery)
$(document).ready(function(){
$('#close').click(function(){$('#record').hide();});
});
DEMO HERE
Or theres the one liner...
<input type="button" value="cancel" onclick="$('#record').hide();">
DEMO 2
EDIT
And....Your request for just pure javascript...
<input type="button" id="close" value="Cancel" onclick=" document.getElementById('record').style.display = 'none';">
DEMO 3

How to add rows to table in one HTML page by asking for data to be added into rows from another HTML page (may be using "prompt" & javascripts)?

I used following code:
Form1.html
<html>
<head>
<title>Table of Data</title>
</head>
<body>
<form method="POST">
<table border="1" id="tblQuery">
<tr>
<th>Query</th>
<th>Answer</th>
<th>Data Type</th>
<th>Screen No.</th>
</tr>
<tr>
<td>Name</td>
<td><input type="text"/></td>
<td>Textbox</td>
<td>1</td>
<td><input type="button" value="Edit" /><input type="button" value="Delete" /></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gender" value="male" />Male<br><input type="radio" name="gender" value="female" />Female</td>
<td>Radio Buttons</td>
<td>2</td>
<td><input type="button" value="Edit" /><input type="button" value="Delete" /></td>
</tr>
<tr>
<td>Qualification</td>
<td><input type="checkbox" name="qualification" value="graduate" />Graduate<br><input type="checkbox" name="qualification" value="post graduate" />Post Graduate</td>
<td>Checkbox</td>
<td>1</td>
<td><input type="button" value="Edit" /><input type="button" value="Delete" /></td>
</tr>
<tr>
<td>City</td>
<td><select>
<option value="new_delhi">New Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="kolkata">Kolkata</option>
<option value="chennai">Chennai</option>
</select></td>
<td>Select List</td>
<td>4</td>
<td><input type="button" value="Edit" /><input type="button" value="Delete" /></td>
</tr>
<tr>
<td>Academic Record</td>
<td><input type="button" value="Add Table" onclick="addTable.html" /></td>
<td>Table</td>
<td>3</td>
<td><input type="button" value="Edit" /><input type="button" value="Delete" /></td>
</tr>
</table>
<br>
</form>
</body>
</html>
Form2.html
<html>
<head>
<title>Action</title>
<script src="scripts/newQuery.js"></script>
</head>
<body>
<input type="button" value="Add Query" onclick="openPage()" />
<input type="button" value="Create Metafile" />
</body>
</html>
Later, I added both the pages to an "index.html" file using "frameset" element as follows:
index.html
<html>
<head>
<title>Main Application case Study</title>
</head>
<frameset rows="75%, *">
<frame src="Form.html" />
<frame src="Form2.html" />
</frameset>
</html>
Now if I open the "index.html" page & click on "Add Query" button, I would get a "prompt" message that would ask me my Query to be added & i'll add it to "Form1.html" page.
The problem i'm facing here is that, when i submit my query to be added to the table, the query is actually submitted to "Form2.html" page, as the "prompt" is coded at that page. But I need to add a row to "Form1.html".
How can I achieve it?

You are making your life much harder than necessary.
You want to open a page that opens a page which does something like
http://www.dzone.com/snippets/add-rows-html-table
function addRow(table,content,morecontent,evenmorecontent) {
var tabBody=table.getElementsByTagName("TBODY")[0];
var row=document.createElement("TR");
var cell1 = document.createElement("TD");
var cell2 = document.createElement("TD");
var cell3 = document.createElement("TD");
var textnode1=document.createTextNode(content);
var textnode2=document.createTextNode(morecontent);
var textnode3=document.createTextNode(evenmorecontent);
cell1.appendChild(textnode1);
cell2.appendChild(textnode2);
cell3.appendChild(textnode3);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
tabBody.appendChild(row);
}
var table = opener.opener.document.getElementById("tblQuery");
addRow(table,"cell1 content","cell2 content","cell3 content");