For example, there is such a table, in which rows are added one by one, how can you count and put in the final row, how many players, swimmers and basketball players are added?

function deleteRow() { tg.deleteRow(1); if (document.all("tg").rows.length == 2) { document.getElementById("b").disabled = true; } } function addRow() { var f1 = document.getElementById("f1").value; var f1k = parseInt(f1); if (isNaN(f1k)) { f1k = 0; } var f2 = document.getElementById("f2").value; var f2k = parseInt(f2); if (isNaN(f2k)) { f2k = 0; } var f3 = document.getElementById("f3").value; var f3k = parseInt(f3); if (isNaN(f3k)) { f3k = 0; } var sum1 = (f1k + f2k + f3k); var row = document.createElement("TR") var tbody = document.getElementById("tg").insertRow(1); var r1 = tbody.insertCell(0); r1.innerHTML = ""; var r2 = tbody.insertCell(1); r2.innerHTML = f1; var r3 = tbody.insertCell(2); r3.innerHTML = f2; var r4 = tbody.insertCell(3); r4.innerHTML = f3; var r4 = tbody.insertCell(4); r4.innerHTML = sum1; if (document.all("tg").rows.length >= 3) { document.getElementById("b").disabled = false; } } 
 #tg { border-collapse: collapse; border-spacing: 0; } #tg td { font-family: Arial, sans-serif; font-size: 14px; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; } #tg th { font-family: Arial, sans-serif; font-size: 14px; font-weight: normal; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; } #tg .tg-yw4l { vertical-align: top } 
 <div class="row"> <label for="n">Футболистов: </label> <input type="text" id="f1" /> </div> <div class="row"> <label for="n">Плавцов: </label> <input type="text" id="f2" /> </div> <div class="row"> <label for="n">Баскетболистов:</label> <input type="text" id="f3" /> <button id="a" onClick="addRow();return false;">Добавить</button> <button id="b" onClick="deleteRow();return false;">Удалить</button> </div> <table id="tg"> <tr> <th class="tg-031e"></th> <th class="tg-031e">Футболистов</th> <th class="tg-031e">Плавцов</th> <th class="tg-yw4l">Баскетболистов</th> <th class="tg-yw4l">Всего</th> </tr> <tr> <td class="tg-031e">Итого</td> <td class="tg-031e"></td> <td class="tg-031e"></td> <td class="tg-yw4l"></td> <td class="tg-yw4l"></td> </tr> </table>

    1 answer 1

     function deleteRow() { tg.deleteRow(1); if (document.all("tg").rows.length == 2) { document.getElementById("b").disabled = true; } // вызываем ф-цию при каждом нажатии на Добавить или Удалить countSum(); } function addRow() { var f1 = document.getElementById("f1").value; var f1k = parseInt(f1); if (isNaN(f1k)) { f1k = 0; } var f2 = document.getElementById("f2").value; var f2k = parseInt(f2); if (isNaN(f2k)) { f2k = 0; } var f3 = document.getElementById("f3").value; var f3k = parseInt(f3); if (isNaN(f3k)) { f3k = 0; } var sum1 = (f1k + f2k + f3k); //var row = document.createElement("TR") var tbody = document.getElementById("tg").insertRow(1); var r1 = tbody.insertCell(0); r1.innerHTML = ""; var r2 = tbody.insertCell(1); r2.innerHTML = f1; r2.classList.add('football'); // добавляем вставляемым ячейкам классы (1) var r3 = tbody.insertCell(2); r3.innerHTML = f2; r3.classList.add('swimming'); // (2) var r4 = tbody.insertCell(3); r4.innerHTML = f3; r4.classList.add('basketball'); // (3) var r4 = tbody.insertCell(4); r4.innerHTML = sum1; if (document.all("tg").rows.length >= 3) { document.getElementById("b").disabled = false; } countSum(); } function countSum() { var cs = [0, 0, 0]; // массив для сумм ячеек // пройдемся по каждому ряду таблицы Array.from(document.getElementById("tg").rows).forEach(function(item) { if(item.querySelector('.football')) { // просуммируем значения ячеек с подходящими классами cs[0]+= +item.querySelector('.football').innerHTML; } if(item.querySelector('.swimming')) { cs[1]+= +item.querySelector('.swimming').innerHTML; } if(item.querySelector('.basketball')) { cs[2]+= +item.querySelector('.basketball').innerHTML; } // присваиваем получившиеся суммы document.getElementById("football-sum").innerHTML = cs[0]; document.getElementById("basket-sum").innerHTML = cs[2]; document.getElementById("swim-sum").innerHTML = cs[1]; }); // ищем и присваиваем получившуюся сумму для ячейки "Всего" document.getElementById("global-sum").innerHTML = cs.reduce(function(sum, current) { return sum + current; }, 0); } 
     #tg { border-collapse: collapse; border-spacing: 0; } #tg td { font-family: Arial, sans-serif; font-size: 14px; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; } #tg th { font-family: Arial, sans-serif; font-size: 14px; font-weight: normal; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; } #tg .tg-yw4l { vertical-align: top } 
     <div class="row"> <label for="n">Футболистов: </label> <input type="text" id="f1" /> </div> <div class="row"> <label for="n">Плавцов: </label> <input type="text" id="f2" /> </div> <div class="row"> <label for="n">Баскетболистов:</label> <input type="text" id="f3" /> <button id="a" onClick="addRow();return false;">Добавить</button> <button id="b" onClick="deleteRow();return false;">Удалить</button> </div> <table id="tg"> <tr> <th class="tg-031e"></th> <th class="tg-031e">Футболистов</th> <th class="tg-031e">Плавцов</th> <th class="tg-yw4l">Баскетболистов</th> <th class="tg-yw4l">Всего</th> </tr> <tr> <td class="tg-031e">Итого</td> <td class="tg-031e" id=football-sum></td> <!-- добавил для каждой ячейки суммы id --> <td class="tg-031e" id=swim-sum></td> <td class="tg-yw4l" id=basket-sum></td> <td class="tg-yw4l" id=global-sum></td> </tr> </table>