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?

When I try to submit a form, Not the values changed by me but the initial values are transferred to action page

<script>
function mySubmit(index) {
if(index==3){
document.myForm.action='update.jsp';
}
if(index==4){
document.myForm.action='';
}
document.myForm.submit();
}</script>
This is my javascript function. And I use this from the code below.
<form name="myForm" method="post">
<table class="table">
<tbody>
<tr>
<input type="hidden" name=num id=num value=<%=article.getNum() %>>
...
<td class="col-md-2">작성자</td>
<td class="col-md-8"><input disabled="disabled" type=text name="writer" id="writer" value="<%=article.getWriter()%> "></td>
</tr>
...
<tr>
<td>비밀번호</td>
<td><input type=password name="passwd" id="passwd"></td>
</tr>
<tr>
<td id="buttons" colspan="2">
<input class="btn btn-xs btn-default" type="button" value="글수정" onclick="mySubmit(3)">
<input class="btn btn-xs btn-default" type="button" value="글삭제" onclick="mySubmit(4)">
<input class="btn btn-xs btn-default" type="button" value="목록보기" onclick="location.href='list.jsp'">
</td>
</tr>
</tbody>
</table>
</form>
This is a revising article page. I want to transfer values changed from original values, but it didn't work. It only transfer original values which are initialized in my code.
HELP!!

Hide/Display Form Section

I have a table in which five fields have upload rows.Each time, I submit a row,the pages refreshes. However, I want to hide all the 4 rows, when the first submit button is clicked, then it should show the next row, and hide the previous row. This should continue till the last one. I have tried the following, but not working. ie all the rows are displaying. I need assitance on how to achieve this feat.
<script>
$("#othBtn1").click(function(){
$("#oth2").show();
$("#oth1").hide();
$("#oth3").hide();
$("#oth4").hide();
$("#oth5").hide();
});
$("#othBtn2").click(function(){
$("#oth3").show();
$("#oth1").hide();
$("#oth2").hide();
$("#oth4").hide();
$("#oth5").hide();
});
</script>
This will continue till the last button. See the HTML below:
<table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
<tr id="oth1">
<th width="26%">Other Request (1):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc1" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt1" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(1):<input type="file" name="jfile1"/></td>
<td width="29%"><input type="submit" name="othBtn1" id="othBtn1" value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth2">
<th width="26%">Other Request (2):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc2" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt2" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(2):<input type="file" name="jfile2"/></td>
<td width="29%"><input type="submit" name="othBtn2" id="othBtn2" value="Add to Request" class="btn btn-success" /></td>
</tr>
<tr id="oth3">
<th width="26%">Other Request (3):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc3" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt3" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(3):<input type="file" name="jfile3"/></td>
<td width="29%"><input type="submit" name="othBtn3" id="othBtn3" value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth4">
<th width="26%">Other Request (4):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc4" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt4" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(4):<input type="file" name="jfile4"/></td>
<td width="29%"><input type="submit" name="othBtn4" id="othBtn4"value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth5">
<th width="26%">Other Request (5):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc5" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt5" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(5):<input type="file" name="jfile5"/></td>
<td width="29%"></td>
</tr>
</table>

You have a couple of issues.
You are missing a opening bracket for your table <.
You are missing the # in your selector.
Change,
table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
to,
<table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
and change,
$("#othBtn1").click(function() {
$("#oth2").show();
$("oth1").hide();
$("oth3").hide();
$("oth4").hide();
$("oth5").hide();
});
$("#othBtn2").click(function() {
$("#oth3").show();
$("oth1").hide();
$("oth2").hide();
$("oth4").hide();
$("oth5").hide();
});
to,
$("#othBtn1").click(function() {
$("#oth2").show();
$("#oth1").hide();
$("#oth3").hide();
$("#oth4").hide();
$("#oth5").hide();
});
$("#othBtn2").click(function() {
$("#oth3").show();
$("#oth1").hide();
$("#oth2").hide();
$("#oth4").hide();
$("#oth5").hide();
});

In your example you missed the # in front of the id selectors.
And you can simple combine everything to a single event listener. No need for doing it manually for each button.
$("#tableRec input[id^=othBtn]").click(function() {
$("#tableRec tr").hide();
$(this).closest("tr").next().show();
});
tr {
display: none;
}
tr:first-child {
display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableRec">
<tr>
<td>1</td>
<td><input type="submit" id="othBtn1" value="Add to Request" /></td>
</tr>
<tr>
<td>2</td>
<td><input type="submit" id="othBtn2" value="Add to Request" /></td>
</tr>
<tr>
<td>3</td>
<td><input type="submit" id="othBtn3" value="Add to Request" /></td>
</tr>
<tr>
<td>4</td>
<td><input type="submit" id="othBtn4" value="Add to Request" /></td>
</tr>
<tr>
<td>5</td>
<td>table end</td>
</tr>
</table>

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 set dynamic input name which generated dynamically using jquery live()

I am new in JavaScript, I have a html table with two text fields and add button and now I write a little jquery script which generate two more text fields when click on add button all this work success but my problem is how to put different names and ids of these dynamically generated fields. My codes are below.
HTML Code
<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>ACC_CODE</td>
<td>ACC_NAME</td>
<td>ACTION</td>
</tr>
<tr>
<td> <input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
<td> <input type="text" class="click" name="parentinput" id="parentinput" /></td>
<td> <input type="button" value="Add New" class="addNew" name="addNew" /></td>
</tr>
</table>
Jquery Code
$(document).ready(function() {
$('.addNew').live({
click: function(){
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
});
});
Please any help how to generate different names and ids of these fields.

I would use on() ( and off() ).
You set it to the parent container (in this case the table) and listen to the class 'addNew'.
Any time a new item with class="addNew" is added to the table, it will be active.
<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>ACC_CODE</td>
<td>ACC_NAME</td>
<td>ACTION</td>
</tr>
<tr>
<td> <input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
<td> <input type="text" class="click" name="parentinput" id="parentinput" /></td>
<td> <input type="button" value="Add New" class="addNew" name="addNew" /></td>
</tr>
</table>
<script>
$(document).ready(function() {
$('.table').on('click', '.addNew', function() {
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs" /></td><td><input type="button" value="Add New" class="addNew" name="add" /></td></tr>');
});
});
</script>
But notice: in your code you did this:
<input type="button" value="Add New" class="add" name="add" />
Of course this will not work; it has to be class="addNew"

First of all .live is depreciated since jq 1.7
Use .delegate
so..
$(document).ready(function() {
var idIndex=1;
$(document).delegate("click",".addNew",function() {
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes_'+idIndex+'"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs_'+idIndex+'" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
idIndex++;
});
});

I have a suggestion that may work fine,
why not make the input field to be an array,
so when you submit it, it will be a group of input group together
or you can easily make the name id's to be base on tr index
like name_1 and id_1, name_2 and id_2