Hello. Help please implement a mechanism that, subject to the availability of rows in the table, will add at the end a line with a total amount on the Price column? Thank!

 function insertRow(id) { var tbody = document.getElementById(id), row = document.createElement("tr"), cellCounter = document.getElementById("myTable").rows.length; var checkbox = document.createElement("input"); checkbox.type = 'checkbox'; checkbox.className = 'checkbox_done'; checkbox.setAttribute('onclick', 'deleteRow(event)'); var btnEdit = document.createElement("input"); btnEdit.type = 'image'; btnEdit.className = 'btnEdit'; btnEdit.src = 'icons/edit.png'; btnEdit.addEventListener('click', function() { editButton(); return false; }); var btnDelete = document.createElement("input"); btnDelete.type = 'image'; btnDelete.className = 'btnDelete'; btnDelete.src = 'icons/delete.png'; btnDelete.setAttribute('onclick', 'delButton(event)'); var tdNum = document.createElement("td"); tdNum.setAttribute("id", "td1_id"); tdNum.appendChild(document.createTextNode(cellCounter)); var tdDone = document.createElement("td"); tdDone.appendChild(checkbox); var tdItem = document.createElement("td"); tdItem.appendChild(document.createTextNode(document.getElementById("add_id").value)); var tdQuant = document.createElement("td"); tdQuant.appendChild(document.createTextNode(document.getElementById("quant_id").value)); var tdPrice = document.createElement("td"); tdPrice.appendChild(document.createTextNode(document.getElementById("price_id").value)); var tdAction = document.createElement("td"); tdAction.setAttribute('colspan', '2'); tdAction.appendChild(btnEdit); tdAction.appendChild(btnDelete); row.appendChild(tdNum); row.appendChild(tdDone); row.appendChild(tdItem); row.appendChild(tdQuant); row.appendChild(tdPrice); row.appendChild(tdAction); tbody.appendChild(row); } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/style.css" rel="stylesheet"> <title>Cart - Shopping List</title> </head> <body class="body"> <div class="menu"> <ul class="list"> <li class="li_index"><a class="link_index" href="index.html">Shopping list</a></li> <li class="li"><a class="link" href="done.html">Done</a></li> <li class="li"><a class="link" href="deleted.html">Deleted</a></li> </ul> </div> <div class="main"> <h1 class="h1">Shopping List</h1> <hr class="hr"> <div class="inputs"> <input class="input_add" type="text" id="add_id" placeholder="Add items to you Shopping List"> <input class="input_quant" type="text" id="quant_id" placeholder="Quant."> <input class="input_price" type="text" id="price_id" placeholder="Price"> <button class="input_button" type="button" onclick="insertRow('myTable');return false;">Add</button> </div> </div> <div class="table"> <table class="mytable" id="myTable" cellspacing="0" border="1"> <tbody id="tbody"> <tr id="tr_id" class="tr"> <td>#</td> <td>Done</td> <td>Item</td> <td>Quantity</td> <td>Price $</td> <td colspan="2" width="100">Action</td> </tr> </tbody> </table> </div> </body> <script src="js/main.js"></script> </html>

  • one
    approach is wrong. you need to click Add not to add rows to the table and add values ​​to the cells from the inputs, but you need to add data to the array / object, and build a table based on the array / object. Then Итого can be added basing on the array.length ........ it will be clearly easier to send data to the server too - Alexey Shimansky
  • Unfortunately, the approach, though not the right one, but so far we have to work with what we have ... And it’s necessary to implement the “total” amount in terms of the existing implementation. If you leave everything so "handy" as it is? What then should be done to get the result? - TheHateInMe

1 answer 1

For example:

In the class="table" , at the end, we manually add the row id="sum-row" in which there is a column id="show-sum" . And with each submission we insert a new line before the id="sum-row" using insertBefore (we assign the general price class to the Price column), add class="price" , insert it into the id="show-sum" column.

 function insertRow(id) { var tbody = document.getElementById(id), row = document.createElement("tr"), cellCounter = document.getElementById("myTable").rows.length; var checkbox = document.createElement("input"); checkbox.type = 'checkbox'; checkbox.className = 'checkbox_done'; checkbox.setAttribute('onclick', 'deleteRow(event)'); var btnEdit = document.createElement("input"); btnEdit.type = 'image'; btnEdit.className = 'btnEdit'; btnEdit.src = 'icons/edit.png'; btnEdit.addEventListener('click', function() { editButton(); return false; }); var btnDelete = document.createElement("input"); btnDelete.type = 'image'; btnDelete.className = 'btnDelete'; btnDelete.src = 'icons/delete.png'; btnDelete.setAttribute('onclick', 'delButton(event)'); var tdNum = document.createElement("td"); tdNum.setAttribute("id", "td1_id"); tdNum.appendChild(document.createTextNode(cellCounter)); var tdDone = document.createElement("td"); tdDone.appendChild(checkbox); var tdItem = document.createElement("td"); tdItem.appendChild(document.createTextNode(document.getElementById("add_id").value)); var tdQuant = document.createElement("td"); tdQuant.appendChild(document.createTextNode(document.getElementById("quant_id").value)); var tdPrice = document.createElement("td"); tdPrice.appendChild(document.createTextNode(document.getElementById("price_id").value)); // столбцу добавляем класс, по которому будем выбирать суммы tdPrice.classList += "price"; var tdAction = document.createElement("td"); tdAction.setAttribute('colspan', '2'); tdAction.appendChild(btnEdit); tdAction.appendChild(btnDelete); row.appendChild(tdNum); row.appendChild(tdDone); row.appendChild(tdItem); row.appendChild(tdQuant); row.appendChild(tdPrice); row.appendChild(tdAction); //----------------------- var sumRow = document.getElementById('sum-row'); var parentE = sumRow.parentNode; parentE.insertBefore(row, sumRow); //----------------------- var prices = document.getElementsByClassName('price'); var sum = 0; for (i = 0, j = 0; i < prices.length; i++) { sum += Number(prices[i].innerText); } document.getElementById('show-sum').innerHTML = sum; //----------------------- } 
 #sum-row{border-color:transparent} 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/style.css" rel="stylesheet"> <title>Cart - Shopping List</title> </head> <body class="body"> <div class="menu"> <ul class="list"> <li class="li_index"><a class="link_index" href="index.html">Shopping list</a></li> <li class="li"><a class="link" href="done.html">Done</a></li> <li class="li"><a class="link" href="deleted.html">Deleted</a></li> </ul> </div> <div class="main"> <h1 class="h1">Shopping List</h1> <hr class="hr"> <div class="inputs"> <input class="input_add" type="text" id="add_id" placeholder="Add items to you Shopping List"> <input class="input_quant" type="text" id="quant_id" placeholder="Quant."> <input class="input_price" type="text" id="price_id" placeholder="Price"> <button class="input_button" type="button" onclick="insertRow('myTable');return false;">Add</button> </div> </div> <div class="table"> <table class="mytable" id="myTable" cellspacing="0" border="1"> <tbody id="tbody"> <tr id="tr_id" class="tr"> <td>#</td> <td>Done</td> <td>Item</td> <td>Quantity</td> <td>Price $</td> <td colspan="2" width="100">Action</td> </tr> <tr id="sum-row" class="tr"> <td colspan="4"></td> <td id="show-sum"></td> <td colspan="2" width="100"></td> </tr> </tbody> </table> <div id="show-sum" style="text-align:right"></div> </div> </body> <script src="js/main.js"></script> </html>