Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.01.2016, 20:42
Интересующийся
Отправить личное сообщение для javaphp Посмотреть профиль Найти все сообщения от javaphp
 
Регистрация: 02.01.2016
Сообщений: 28

DOM, help: Создание элементов динамически
Имеется обычная таблица <table>, с некоторым кол-вом строк <tr> и ячеек <td>. Подскажите: как с помощью document.createElement("td") добавить по одной ячейке <td> в каждую строку <tr>. То есть добавленная ячейка <td> будет последним дочерним элементов в каждой строке <tr>. Может как-то использовать document.getElementsByTagName('tr')?
Ответить с цитированием
  #2 (permalink)  
Старый 02.01.2016, 20:47
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

Да.

[].forEach.call(document.querySelectorAll('tr'), function(item) {
	var td = document.createElement('td');
	item.appendChild(td);
});
Ответить с цитированием
  #3 (permalink)  
Старый 02.01.2016, 20:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,779

javaphp,
https://learn.javascript.ru/modifying-document
Ответить с цитированием
  #4 (permalink)  
Старый 02.01.2016, 20:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,779

<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 02.01.2016, 21:39
Интересующийся
Отправить личное сообщение для javaphp Посмотреть профиль Найти все сообщения от javaphp
 
Регистрация: 02.01.2016
Сообщений: 28

Спасибо! Попробовал оба варианта - все работает. Только, подскажите, как вне тела функции вывести количество этих добавлений. То есть не количества всех добавленных <td>, а именно сколько раз они добавлялись в строки. Например вывести это число в console.log().
Ответить с цитированием
  #6 (permalink)  
Старый 02.01.2016, 21:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,779

Сообщение от javaphp
То есть не количества всех добавленных <td>, а именно сколько раз они добавлялись в строки.
не осилил
Ответить с цитированием
  #7 (permalink)  
Старый 02.01.2016, 21:59
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

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

document.querySelectorAll('tr').length;


если правильно понял
Ответить с цитированием
  #8 (permalink)  
Старый 02.01.2016, 22:37
Интересующийся
Отправить личное сообщение для javaphp Посмотреть профиль Найти все сообщения от javaphp
 
Регистрация: 02.01.2016
Сообщений: 28

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
создание элементов динамически DOM Сергей_Р Events/DOM/Window 12 30.12.2015 14:26
быстрая отрисовка элементов JS (DOM) Brook Events/DOM/Window 2 17.07.2014 23:53
DOM создание объекта JQ ~ вопрос реализации состояния Brook Events/DOM/Window 0 21.01.2014 20:45
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 10:33
Динамическое создание элементов DOM Crudelis Общие вопросы Javascript 7 13.11.2010 01:28