DOM, help: Создание элементов динамически
Имеется обычная таблица <table>, с некоторым кол-вом строк <tr> и ячеек <td>. Подскажите: как с помощью document.createElement("td") добавить по одной ячейке <td> в каждую строку <tr>. То есть добавленная ячейка <td> будет последним дочерним элементов в каждой строке <tr>. Может как-то использовать document.getElementsByTagName('tr')?:help:
|
Да.
[].forEach.call(document.querySelectorAll('tr'), function(item) {
var td = document.createElement('td');
item.appendChild(td);
});
|
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<table width="400" summary="" >
<tbody>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
</tbody>
</table>
<script>
[].forEach.call(document.querySelectorAll('tr'), function(item,i) {
var td = item.insertCell(item.cells.length);
td.innerHTML = i
});
</script>
</body>
</html>
|
Спасибо! Попробовал оба варианта - все работает. Только, подскажите, как вне тела функции вывести количество этих добавлений. То есть не количества всех добавленных <td>, а именно сколько раз они добавлялись в строки. Например вывести это число в console.log().
|
Цитата:
|
javaphp, ну, сколько элементов tr, столько и добавлений, т.е
document.querySelectorAll('tr').length;
если правильно понял :-? |
да именно так. уже понял. Еще раз спасибо. Очень помогли мне:)
|
| Часовой пояс GMT +3, время: 09:25. |