Javascript - Добавить новую строку в таблицу HTML, которая суммирует столбцы

-1

С помощью JavaScript, как добавить новую строку в таблицу HTML, которая суммирует значения, следующие за 2-й строкой.Javascript - Добавить новую строку в таблицу HTML, которая суммирует столбцы

Вот пример того, что выше Изображает:

Ожидаемый результат:

Вот HTML разметка:

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

</head> 

<body> 
<!DOCTYPE html> 
<html> 
<body> 

<table border="1" style="width:100%"> 
    <tr> 
    <td>Branch</td> 
    <td>Division</td> 
    <td>TallyA</td> 
    <td>TallyB</td> 
    <td>TallyC</td> 
    </tr> 
    <tr> 
    <td>Alpha</td> 
    <td>A101</td> 
    <td>6</td> 
    <td>4</td> 
    <td>5</td> 
    </tr> 
    <tr> 
    <td>Bravo</td> 
    <td>B102</td> 
    <td>16</td> 
    <td>8</td> 
    <td>10</td> 
    </tr> 
    <tr> 
    <td>Charlie</td> 
    <td>C103</td> 
    <td>11</td> 
    <td>17</td> 
    <td>21</td> 
    </tr> 
</table> 


</body> 

</html> 
</body> 

</html>

источник

2016-06-22 BobbyJones

Закрепить код размещен там 2 DOCTYPE и вложенная HTML и тела тегов. – GillesC

@ RichardHamilton у него нет, он показал нам разметку, там нет javascript ... –

Вот мое решение. Это может выглядеть многословным, но это необходимо для сложности этой задачи.

Во-первых, я указал кнопки и элементы таблицы. Чтобы предотвратить повторные клики, которые добавят больше строк, и уничтожьте код, я создал логическую переменную, которая проверяет, были ли строки уже суммированы. Код запускается только в первый раз внутри условия if(!summedItems).

Я создал новые td элементы для всех пяти столбцов в таблице и создал текстовые узлы для всех, кроме деления одного.

Затем я создал селекторов, и здесь это стало сложно. Первая строка не содержит числового значения, поэтому мне пришлось запросить все строки со второго. Я сделал это с tr:nth-child(n+2).

Затем мне нужно найти третью ячейку в каждой из этих строк. Для этого могут использоваться дочерние или дочерние селекторы. Полный селектор - tr:nth-child(n+2) td:nth-child(3). Повторите это для следующих двух, только увеличивайте значения внутри td: nth-child.

Поскольку мы должны проходить через все эти значения, я создал три отдельных массива для хранения значений внутри третьего, четвертого и пятого столбцов соответственно. Важно отметить, что эти значения имеют тип string, и их необходимо преобразовать в целые числа. Для этого просто добавьте знак + перед строкой. Итерируя по количеству элементов в каждом запросе, я заполнял массивы.

Теперь нам нужно скомпоновать все эти предметы, и мы можем сделать это с помощью метода reduce.

Теперь добавьте текстовые поля в ячейки, ячейки в строку и, наконец, строку в таблицу. Наконец, установите для переменной summedItems значение true, чтобы предотвратить безумное поведение.

var button = document.getElementById("total-items"); 
 
var table = document.getElementById("my-table"); 
 

 
var summedItems = false; 
 

 
function sumItems() { 
 
    if (!summedItems) { 
 
     var row = document.createElement("tr"); 
 
     var branch = document.createElement("td"); 
 
     var division = document.createElement("td"); 
 
     var tallyA = document.createElement("td"); 
 
     var tallyB = document.createElement("td"); 
 
     var tallyC = document.createElement("td"); 
 
     var branchText = document.createTextNode("Total"); 
 

 
    
 
     var sumA = document.querySelectorAll("tr:nth-child(n+2) td:nth-child(3)"); 
 
     var sumB = document.querySelectorAll("tr:nth-child(n+2) td:nth-child(4)"); 
 
     var sumC = document.querySelectorAll("tr:nth-child(n+2) td:nth-child(5)"); 
 
    
 
     var aSums = [], bSums = [], cSums = []; 
 
    
 
     for (var i = 0; i < sumA.length; i++) { 
 
      aSums.push(+(sumA[i].innerHTML)); 
 
     } 
 
    
 
     for (var i = 0; i < sumB.length; i++) { 
 
      bSums.push(+(sumB[i].innerHTML)); 
 
     } 
 
    
 
     for (var i = 0; i < sumC.length; i++) { 
 
      cSums.push(+(sumC[i].innerHTML)); 
 
     } 
 
    
 
     aSums = aSums.reduce((a,b) => a + b)  
 
     bSums = bSums.reduce((a,b) => a + b) 
 
     cSums = cSums.reduce((a,b) => a + b) 
 
    
 
     var tallyAText = document.createTextNode(aSums); 
 
     var tallyBText = document.createTextNode(bSums); 
 
     var tallyCText = document.createTextNode(cSums); 
 
    
 
     branch.appendChild(branchText); 
 

 
     tallyA.appendChild(tallyAText); 
 
     tallyB.appendChild(tallyBText); 
 
     tallyC.appendChild(tallyCText); 
 
     
 
     [branch, division, tallyA, tallyB, tallyC].forEach((e) => row.appendChild(e) 
 
     ) 
 

 
     table.appendChild(row); 
 
     summedItems = true; 
 
    } 
 
} 
 

 
button.addEventListener("click", function() { 
 
    sumItems(); 
 
});

<table id="my-table" border="1" style="width:100%"> 
 
    <tr> 
 
    <td>Branch</td> 
 
    <td>Division</td> 
 
    <td>TallyA</td> 
 
    <td>TallyB</td> 
 
    <td>TallyC</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Alpha</td> 
 
    <td>A101</td> 
 
    <td>6</td> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Bravo</td> 
 
    <td>B102</td> 
 
    <td>16</td> 
 
    <td>8</td> 
 
    <td>10</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Charlie</td> 
 
    <td>C103</td> 
 
    <td>11</td> 
 
    <td>17</td> 
 
    <td>21</td> 
 
    </tr> 
 
</table> 
 

 
<button id="total-items">Total Items</button>

источник

2016-06-22 16:08:53

с JQuery:

$("table").each(function() { 
    var $table = $(this); 
    $row = $("<tr>") 
    $row.append("<td>Totale</td>") 
    var sums = []; 
    $table.find("tr").each(function(){ 
    var index = 0; 
    $(this).find("td").each(function() { 
     if (!sums[index]) sums[index] = 0; 
     sums[index] += parseInt($(this).html()); 
     index++; 
    }) 
    }) 
    for(var i=1;i<sums.length;i++) { 
    var el = sums[i]; 
    if (isNaN(el)) el = ""; 
    $row.append("<td>"+el+"</td>") 
    } 
    $table.append($row) 
})

jsFiddle

источник

2016-06-22 15:53:08 user1119279

Javascript - Добавить новую строку в таблицу HTML, которая суммирует столбцы

ответ

Смежные вопросы