Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 21.01.2017, 15:22   #1
Alexey!
Пользователь
 
Регистрация: 15.04.2010
Сообщений: 18
По умолчанию Добавить строку в таблицу

Здравствуйте!
Код добавления строки в таблицу:
Код HTML:
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title> Table </title>

<style>
 table
 {table-layout: fixed;
  width: 300px; /* Ширина таблицы */
  margin: auto; 
  }
  
 td {width: 100%; text-align: center;} 
</style>

<script>
 function addRow()
 { var tableBody=document.getElementById("tableBody");
 var newRow=document.createElement("tr");
 var newCell=document.createElement("td");
 newCell.innerHTML="123"
 
 for (var i=0; i<3; i++)
  newRow.appendChild(newCell);
 
 tableBody.appendChild(newRow);
 }

</script>


</head>

<body>

<input type="Button" value="Push me!" onclick="addRow()">

<table>
 <tbody id="tableBody">
  <tr>
   <td></td>
   <td>x </td>
   <td>y </td>
  </tr>
 </tbody> 
</table>

</body>
</html>
Почему код newRow.appendChild(newCell), отрабатывающий 3 раза, добавляет только одну ячейку?
Свойство innerHTML тегов <TR>, вероятно, не readOnly, т.к. при открытии в отладчике свойств DOM без проблем редактирую св-во innerHTML, в т.ч. добавляю ячейки?

Заранее благодарю за ответ!
Alexey! вне форума Ответить с цитированием
Старый 21.01.2017, 17:16   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Потому что ты 3 раза одну и ту же ячейку засовываешь в одну и ту же строку.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 21.01.2017, 17:56   #3
Alexey!
Пользователь
 
Регистрация: 15.04.2010
Сообщений: 18
По умолчанию

Благодарю за ответ!
Т.е. требуется создавать массив объектов добавляемых ячеек?
Alexey! вне форума Ответить с цитированием
Старый 21.01.2017, 18:25   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Зачем? Штампуй на ходу.
Можешь клонировать эталон, неважно, главное чтобы это были разные объекты.
Можно и в массив, но я смысла не вижу.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 21.01.2017, 20:48   #5
Alexey!
Пользователь
 
Регистрация: 15.04.2010
Сообщений: 18
По умолчанию

Благодарю за ответ!
Цитата:
клонировать эталон
Могли бы подсказать как это сделать на моем примере?
Пока решил так:
Код HTML:
var newRow=document.createElement("tr");
 newRow.innerHTML="<td>123</td><td>123</td><td>123</td>"
Alexey! вне форума Ответить с цитированием
Старый 22.01.2017, 00:04   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Alexey! Посмотреть сообщение
клонировать эталон
Могли бы подсказать как это сделать на моем примере?
Код:
 for (var i=0; i<3; i++)
  newRow.appendChild(newCell.cloneNode());
.innerHTML считается плохим методом. Он медленный, плохо работает в различных браузерах, особенно в таблицах.
Он запускает текстовый парсер, в то время как добавление объектов через DOM в данном случе будет работать значительно быстрее. Еще быстрее будет работа через API documentFragment. Если интересно, поищи лекции на тему от webStandartDays, по-моему, Вадим Макеев про это говорил еще где-то в 2012 году.

т.е. Твой первый код был идеологически правильней, просто ты не понял как оно делается.
.createElement тебе создает один экземпляр дом-узла, и ты его трижды пихаешь в одну строку. Если ты его потом приаппендишь в другое место, то он уберется из этой строки и появится там, куда ты его заслал. Чтобы добавить 3 элемента, тебе нужно создать 3 элемента и их добавлять.
ООП, мать его)

Цитата:
Сообщение от Alexey! Посмотреть сообщение
Пока решил так
плохой, но действенный выход.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 22.01.2017, 09:42   #7
Alexey!
Пользователь
 
Регистрация: 15.04.2010
Сообщений: 18
По умолчанию

Благодарю за помощь!
Добавил параметр deep=true для клонирования установленных атрибутов.

PHP код:
newCell.innerHTML="123"
for (var i=0i<3i++)
  
newRow.appendChild(newCell.cloneNode(1)); 
Alexey! вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить строку в таблицу ольгаг Microsoft Office Access 2 24.04.2016 18:14
Добавить строчку в таблицу Predator199 C# (си шарп) 25 14.03.2015 12:01
Не могу добавить строку в таблицу Lost7070 PHP 1 16.12.2014 08:25
Добавить в таблицу Наталья Баева SQL, базы данных 0 15.02.2014 21:19
Добавить строку в таблицу с объединенными ячейками Stilet Microsoft Office Word 3 03.08.2012 13:09