Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Динамическое создание строк таблицы


Автор: Sunvas 15.4.2007, 22:29
Надо динамически добавлять в конец таблицы одну строку. Вот, что пишу:
Код

<body>

<script type="text/javascript">    

  function add(d)    
  {    
  d.parentNode.appendChild(d.cloneNode(true))    
   }    

</script>
<p>&nbsp;</p>
<table border="1" width="100%" id="table1">
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr id="ed">
        <td>Текст</td>
    </tr>
</table>
<p><input type="button" value=" + " onclick="add(ed)"></p>

</body>


Но при этом добавляется одна строка только при первом клике. Где ошибка? Как ее исправить?  smile 

Автор: butionok 15.4.2007, 22:44
Sunvas, 

Ты клонируешь строки. При это ID клонируются тоже, т.е. появляются строки с одним и тем же ID. Нужно чтобы ID были разные.

Вот так можно сделать:
Код

function add(d)    
  {    
  var newline=d.parentNode.appendChild(d.cloneNode(true));
  newline.id=d.parentNode.childNodes.length;
   } 
 

Автор: SelenIT 15.4.2007, 22:49
butionok, а нельзя ли клонировать Вашу телепательную машинку? Лично меня приведенный фрагмент кода вообще поставил в тупик...

Автор: Sunvas 15.4.2007, 22:58
butionok, спасибо.  smile 
Да, забыл в первом посте дописать.
А как написать процедуру, которая бы удаляла последнюю строку?

Автор: butionok 15.4.2007, 23:27
SelenIT, 

Дело в том, что Вы эксперт, а для меня JS это хобби. Воззрение проблемы другое.  Если хотите легко понимать проблемы новичков надо деградировать  smile 

Кстати меня удивило, что со слов Sunvas
 
Код

onclick="add(ed)"


работает. Или он забыл поставить ed в кавычки. Я просто его код не проверял.

Sunvas, удаление строки

Код

function removeLast(table)
    {
    var table=document.getElementById(table);
    table.childNodes[0].removeChild(table.childNodes[0].childNodes[table.childNodes[0].childNodes.length-1]);
    } 


Использование:

Код

<p><input type="button" value=" - " onclick="removeLast('table1')"></p>


Кстати если ты удалишь строчку с ID="ed", то функция add(d) выдаст ошибку. Так что не удивляйся и лучше пересмотри логику.
 

Автор: SelenIT 15.4.2007, 23:39
Sunvas, вариант удаления строки:
Код

table.getElementsByTagName('tbody')[0].removeChild(table.rows[table.rows.length-1])

ой, даже ещё проще:
Код

table.deleteRow(table.rows[table.rows.length-1])


butionok, хм, проблема в другом - для меня код в посте Sunvasа закончился строкой 3 (<script type="text/javascript">), никаких add(ed) я просто не видел...

...кстати, Ваш вариант удаления не работает в Gecko, из-за все тех же <CENSORED> пробелов в коде, зачисляемых в childNodes...

Автор: butionok 16.4.2007, 00:12
SelenIT, 

Да, точно. Я про deleteRow знал, просто я как-то перепутал и решил что это фича IE, а не DOM.
А что за  эти <CENSORED> пробелы в коде и зачем их зачисляют в childNodes?

Автор: SelenIT 16.4.2007, 02:21
Цитата(butionok @  16.4.2007,  00:12 Найти цитируемый пост)
как-то перепутал и решил что это фича IE, а не DOM

Судя по всему, всё-таки http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-13114938, вполне себе стандартный.

Цитата(butionok @  16.4.2007,  00:12 Найти цитируемый пост)
А что за  эти <CENSORED> пробелы в коде и зачем их зачисляют в childNodes?

В Gecko-браузерах (и, видимо, в "убогой Опере" тоже - вообще по стандарту W3C, в этом месте действительно малость не до конца продуманному) пробелы между тегами в коде считаются текстовыми нодами и добавляются в DOM-дерево. Так что если между <table> и <tbody> (особенно "виртуальным") есть пробел/перенос строки - именно он будет считаться table.childNodes[0]. Выхода два - либо брать не просто первый чайлд элемента, а первый чайлд определенного типа/с определенным свойством, или... (в частном случае таблиц) пользоваться специализированными коллекциями ;).

Автор: butionok 16.4.2007, 02:30
SelenIT, 

Про текстовые ноды не знал. Видать они (W3C) хотели чтоб жизнь не казалась программисту малиной.

Автор: smartov 16.4.2007, 11:36
SelenIT, под FF первый пост неверно отображается.  уже зарепортил баг

Автор: butionok 16.4.2007, 11:43
Лишний раз убедился что IE рулит.

Автор: smartov 16.4.2007, 11:45
butionok, флейм и религиозные войны находятся в других форумах.

Автор: butionok 16.4.2007, 11:49
smartov, 

А это тут при чём?

Автор: SelenIT 16.4.2007, 13:06
smartov, спасибо! То-то я никак не мог понять, что у butionkа за телепательная машинка... а оказывается, это MSIE - Mental Speculations Intelligent Extrapolator smile.

Автор: Sunvas 16.4.2007, 14:52
Всем спасибо.  smile 
Следующий раз стучите в ПМ или асю, если что не ясно. smile 

Автор: butionok 16.4.2007, 15:11
SelenIT, 

И то лучше чем Фрайерфокс smile

Автор: smartov 16.4.2007, 15:37
butionok, 
блин рука так и тянется к минусу. Мне, например, Лиса нравится.

Не разжигай холивар. По крайней мере в этом форуме.

Автор: butionok 16.4.2007, 15:42
smartov, 

Читай свою подпись, "мудрец"  smile 

Автор: smartov 16.4.2007, 16:22
butionok, Вам не удастся меня обидеть, мсье, как ни старайтесь. 
Вы просто молоды, а может просто недалеки во взглядах. В любом случае Вы не имеете понятия о чувстве тона и иже с ним. За сим оффтопик прекращаю и из темы удаляюсь, выражая свое негативное отношение к Вам, в подобающей для этого форума форме - "-".

Автор: AndyRoot 9.3.2009, 12:46
Вот http://abloga.net.ru/?p=42. Там подробно расписсано как динамически добавлять строки в таблицу. Работает в IE, Firefox и Opera

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)