Форум

javaphp · #1 (**permalink**) 02.01.2016, 21:42

Имеется обычная таблица <table>, с некоторым кол-вом строк <tr> и ячеек <td>. Подскажите: как с помощью document.createElement("td") добавить по одной ячейке <td> в каждую строку <tr>. То есть добавленная ячейка <td> будет последним дочерним элементов в каждой строке <tr>. Может как-то использовать document.getElementsByTagName('tr')?

Lemme · #2 (**permalink**) 02.01.2016, 21:47

Да.

[].forEach.call(document.querySelectorAll('tr'), function(item) {
	var td = document.createElement('td');
	item.appendChild(td);
});

рони · #3 (**permalink**) 02.01.2016, 21:48

javaphp,
https://learn.javascript.ru/modifying-document

рони · #4 (**permalink**) 02.01.2016, 21:52

<!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>

javaphp · #5 (**permalink**) 02.01.2016, 22:39

Спасибо! Попробовал оба варианта - все работает. Только, подскажите, как вне тела функции вывести количество этих добавлений. То есть не количества всех добавленных <td>, а именно сколько раз они добавлялись в строки. Например вывести это число в console.log().

рони · #6 (**permalink**) 02.01.2016, 22:42

Сообщение от javaphp

То есть не количества всех добавленных <td>, а именно сколько раз они добавлялись в строки.

не осилил

Lemme · #7 (**permalink**) 02.01.2016, 22:59

javaphp, ну, сколько элементов tr, столько и добавлений, т.е

document.querySelectorAll('tr').length;

если правильно понял

javaphp · #8 (**permalink**) 02.01.2016, 23:37

да именно так. уже понял. Еще раз спасибо. Очень помогли мне

Форум

Справочник

Discord чат

Курсы javascript