# Сумма колонок HTML таблицы через CSS селектор

В данном видео я покажу вам, как найти сумму колонок 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); } });`

## Смотрите также

- видео
  колонки и диагонали таблицы JavaScript
- видео
  сумма рядов таблицы JavaScript

← →
↑