在javascript中获取动态添加行的计算

Question

Im having a problem with my input box not showing any values.

 var renumber = 0; function addItem() { renumber++; var html = "<tr"; html += "<td id='itemNum'>" + renumber + "</td>"; html += "<td><input name='itemName[]'></td>"; html += "<td><input name='itemDescription[]'></td>"; html += "<td><span class='currency'>$</span><input id='perHour' value='0' name='amountPerHour[]'></td>"; html += "<td><input id='lineHours' value='0' name='hours[]'></td>"; html += "<td><span class='currency'>$</span><input id='lineTotal' onblur='lineTotal(this);' value='0' name='lineTotal[]'></td>"; html += "<td><button type='button' id='remove_button' onclick='removeItem();'> X </button></td>"; html += "</tr>"; document.getElementById("addItems").insertRow().innerHTML = html; } function removeItem() { document.getElementById("addItems").deleteRow(0); renumber--; var reorder = tblRow.rows; for(var i = 0; i < reorder.length; i++) { renumber[i]; renumber++; } document.getElementById("itemNum").innerHTML = renumber; } function lineTotal(elem) { var mainRow = document.getElementById(elem); var AmtPerHour = mainRow.getElementsByTagName('td').getElementById('perHour')[0].value; var lnHrs = mainRow.getElementsByTagName('td').getElementById('lineHours')[0].value; var total = mainRow.getElementsByTagName('td').getElementById('lineTotal')[0]; var myResult = AmtPerHour * lnHrs; total.value = myResult; }

 <table> <tr> <th>#</th> <th>Item Name</th> <th>Item Description</th> <th>Amount Per Hour</th> <th>Total Hours</th> <th>Line Total</th> </tr> <tbody id="addItems"></tbody> </table> <p> <button type="button" onclick="addItem();"> Add Item </button> </p> <p> Amount Due: $0.00 <script type="text/javascript"> //add the amounts from all items. //if none added then have it set to zero. </script> </p> <p> Due Date: <script type="text/javascript"> //start it 2 weeks from actual date </script> </p> <p> <input id="invoice_submit" type="submit" name="submit"> </p>

my biggest concern is the values not appearing.

Second problem, but one I can live with:
For rows, row1, row2, row3. if I delete row2, I would like it to then be row1, row2.
Right now it is row1, row3. I am talking about the # table section.

any ideas?

Answer 1

Hi please find below working snippet solving your first and second problems. I made a few fixes to your code.

1. your data was not showing because getElementById expects you to pass element ID as string but you were passing element to it so this document.getElementById(elem) wont work.

2. you were calculating line total when that field is getting blurred but you should calculate line total also when user makes changes to either amount per hour or total hours so I added onblur to those fields also.

3. your delete row was deleting the first row always no matter which row I am trying to delete ( document.getElementById("addItems").deleteRow(0); will always delete the first row in table ) so I added the row reference to that function and now it deletes the appropriate row.

4. I added a Due Amount Total method to your Javascript to calculate due amount every time table is updated(insert/delete row) and updates the label value Amount Due: $0.00

5. I added the logic to renumber all the rows whenever a row is deleted. ( your second problem is no more so dont live with it :) ).

 var renumber = 0; // trigger everytime there is change in the table row to calculate the new due amount. function calculateDueAmount() { var tblRows = document.getElementById("addItems").getElementsByTagName('tr'); let total = 0; for (var i = 0; i < tblRows.length; i++) { let lineTotal = tblRows[i].getElementsByTagName('td')[5].getElementsByTagName('input')[0].value; total += Number(lineTotal) } document.getElementById("amountDue").innerText = total.toFixed(2); } // no changes required in this function addItem() { renumber++; var html = "<tr>"; html += "<td id='itemNum'>" + renumber + "</td>"; html += "<td><input name='itemName[]'></td>"; html += "<td><input name='itemDescription[]'></td>"; html += "<td><span class='currency'>$</span><input id='perHour' onblur='lineTotal(this);' value='0' name='amountPerHour[]'></td>"; html += "<td><input id='lineHours' onblur='lineTotal(this);' value='0' name='hours[]'></td>"; html += "<td><span class='currency'>$</span><input id='lineTotal' onblur='lineTotal(this);' value='0' name='lineTotal[]'></td>"; html += "<td><button type='button' id='remove_button' onclick='removeItem(this);'> X </button></td>"; html += "</tr>"; document.getElementById("addItems").insertRow().innerHTML = html; } // updated and sanitized the logic to delete the row function removeItem(elem) { let rowToDelete = elem.parentElement.parentElement; let rowNumber = rowToDelete.getElementsByTagName('td')[0].innerText; document.getElementById("addItems").deleteRow(rowNumber - 1); let tblRows = document.getElementById('addItems').getElementsByTagName('tr'); let j = 0; for (; j < tblRows.length; j++) { tblRows[j].getElementsByTagName('td')[0].innerText = j + 1 } calculateDueAmount(); // calculate due amount since row got deleted. renumber = j; } function lineTotal(elem) { var mainRow = elem.parentElement.parentElement; var AmtPerHour = mainRow.getElementsByTagName('td')[3].getElementsByTagName('input')[0].value; var lnHrs = mainRow.getElementsByTagName('td')[4].getElementsByTagName('input')[0].value; var total = mainRow.getElementsByTagName('td')[5].getElementsByTagName('input')[0]; var myResult = Number(AmtPerHour) * Number(lnHrs); total.value = myResult; calculateDueAmount(); // calculate due amount since row got added }

 <table> <tr> <th>#</th> <th>Item Name</th> <th>Item Description</th> <th>Amount Per Hour</th> <th>Total Hours</th> <th>Line Total</th> </tr> <tbody id="addItems"></tbody> </table> <p> <button type="button" onclick="addItem();"> Add Item </button> </p> <p> Amount Due: $<span id="amountDue">0.00</span> <script type="text/javascript"> //add the amounts from all items. //if none added then have it set to zero. </script> </p> <p> Due Date: <script type="text/javascript"> //start it 2 weeks from actual date </script> </p> <p> <input id="invoice_submit" type="submit" name="submit"> </p>