В данном видео я покажу вам, как найти сумму колонок HTML таблицы через CSS селектор.
Исходники кода
td {
padding: 10px;
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<br>
<input type="submit" id="button">
var button = document.querySelector('#button');
button.addEventListener('click', function() {
var table = document.querySelector('#table');
var trs = table.querySelectorAll('tr');
var colsNum = trs[0].querySelectorAll('td').length;
var resultTr = document.createElement('tr');
table.appendChild(resultTr);
for (var i = 0; i < colsNum; i++) {
var tdNumber = i + 1;
var tds = table.querySelectorAll('td:nth-child(' + tdNumber + ')');
var sum = 0;
for (var j = 0; j < tds.length; j++) {
sum += Number(tds[j].innerHTML);
}
var resultTd = document.createElement('td');
resultTd.innerHTML = sum;
resultTr.appendChild(resultTd);
}
});