Плохо знаю жабускрипт, поэтому спрашиваю. Есть таблица. Обыкновенная. HTML: <table> <tr id="s1"> <td> </td><td> </td> </tr> <tr id="s2"> <td> </td><td> </td> </tr> </table> Как можно динамически вставить между "s1" и "s2" ещё строки. То есть - HTML: <tr id="s3"> <td> </td><td> </td> </tr> :?: Пробовал так: [js] newtr=document.createElement("tr"); newtr.innerHTML='<tr><td> </td><td> </td></tr>';[/js] а вот дальше - не пойму, что надо сделать. Дальше x=document.getElementById('s2'); - мысль не идёт.
[js]document.getElementById('s2').parentNode.insertBefore(newtr, document.getElementById('s2'));[/js]
вот про parentNode - я не знал, поэтому у меня и не получалось insertBefore. Спасибо, теперь понял смысл конструкции.
http://www.mozilla.org/docs/dom/ Конкретно справочник: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
А за ссылки - отдельное спасибо. Сам замучался искать нормальные руководства. А метод "научного тыка" надоел до смерти.
Не работает - не встраивается. Всё, что ниже - смещается на один пиксель вниз и всё. Новый tr на экране не появляется.
Место, где надо вставить: HTML: <tr id="befor"> <td> <p> </p> </td> <td> <p> </p> </td><td></td> </tr> Процесс вставки: [js] newnode=document.createElement("tr"); newtext= '<tr><td> </td><td><p><b>ТЕКСТ</b></p></td><td> </td></tr>'; newnode.innerHTML=newtext; document.getElementById('befor').parentNode.insertBefore(newnode,document.getElementById('befor'));[/js] Форматирование и текст убрал. Эта же схема с div'ами - работает. Создал быстренько несколько дивов, попробовал insertBefore - на экране отображается так, как нужно. Но мне нужно именно tr вставить. А с ними не получается. Я не совсем понимаю смысл строки newnode=document.createElement("tr"); - если я потом делаю newnode.innerHTML='<tr>...</tr>'; Попробовал поиграться - вместо "tr" писал разное, начиная от span, div, до бреда. В результате понял так, что новую строку (tr) он таки вставляет, но на экран её не показывает. Потому что только при createElement('tr') есть эффект, что всё, что ниже места вставляния - сдвигается на миллиметр вниз. При всех остальных вариантах - либо синтаксич. ошибка, либо на экране ничего не происходит.
RomanBush Я имел ввиду, что стоит посмотреть исходный код документа после операции вставки этого самого tr. Чтобы наглядно посмотреть, а что же получилось Я, честно, тоже не понимаю, зачем в строке innerHTML еще раз указываются tr. innerHTML - это же то, что внутри тега, т.е. внутри tr. HTML: <html> <head> <title>Row insert example</title> <style type="text/css"> table { empty-cells: show; } td { border: 1px solid red; padding: 50px; } </style> <script type="text/javascript" src="js/core.js"></script> </head> <body> <table> <tr id="s1"> <td></td><td></td> </tr> <tr id="s2"> <td></td><td></td> </tr> </table> <script type="text/javascript"> var tr = create_element(null, 'tr'); create_txt(create_element(tr, 'td'), 'cell 1'); create_txt(create_element(tr, 'td'), 'cell 2'); $('s2').parentNode.insertBefore(tr, $('s2')); </script> </body> </html> Сорри, что с лишними функциями, но я уже без них никак не могу Вот необходимый кусок core.js: [js]/* Сокращение document.getElementById */ function $(id) { return document.getElementById(id); } /* Создает текстовый нод с содержанием content */ function create_txt(parent, content) { var txt = document.createTextNode(content); parent.appendChild(txt); return txt; } /* Создает элемент name с атрибутами atts * Если parent != null добавляет к нему элемент */ function create_element(parent, name, atts) { var el = document.createElement(name); for (var aname in atts) el.setAttribute(aname, atts[aname]); if (parent != null) parent.appendChild(el); return el; }[/js]
То есть - получается, что мало создать <tr> и сказать ему innerHTML= а надо ещё и все td'шники к нему прикрутить? Мать...мать...мать.... откликнулось эхо. Спасибо за подсказку. Вот теперь у меня в голове модель этой таблицы уложилась. Кажется. Может быть. Ща поэксперементирую.
Либо одно, либо другое… Первое - это чистый DOM, второе - небольшой хак со стороны браузеропроизводителей для облегчения жизни.
Опять не понял. Этот же вариант не работает в случае с таблицами? Или я что-то не так делаю/не понимаю?
RomanBush HTML: <table> <tr id="sds"> <td>123</td> </tr> </table> <button onclick="document.getElementById('sds').innerHTML += '<td>123</td>'">+1</button> В ИЕ выдаёт runtime error. В мозиле всё нормально. Сам недавно наткнулся на это. Видно, какие-то проблемы с innerHTML в <TR>.
Я же привел пример на чистом DOM. Вот пример с innerHTML: HTML: <html> <head> <title>Row insert example</title> <style type="text/css"> table { empty-cells: show; } td { border: 1px solid red; padding: 50px; } </style> <script type="text/javascript" src="js/core.js"></script> </head> <body> <table> <tr id="s1"> <td></td><td></td> </tr> <tr id="s2"> <td></td><td></td> </tr> </table> <script type="text/javascript"> var tr = document.createElement('tr'); $('s2').parentNode.insertBefore(tr, $('s2')); tr.innerHTML = '<td>cell 1</td><td>cell 2</td>'; </script> </body> </html>
AlexGousev В вашем примере в ИЕ - "unknow runtime error". Не знаете, почему так? Баг браузера, или просто innerHTML в <tr> - это не по стандартам?
+Sten+ Да, действительно баг ие http://www.ericvasilik.com/2006/07/code-karma.html ЗЫ: юзайте DOM и будет вам счастье
Не работает. Тоже самое, что и у меня получалось - сдвигается всё, что ниже, на один пиксел, а новые строки не показываются. К тому же пишет "неизвестная ошибка выполнения". Если поменять местами последнии две строчки - то ошибку не пишет, но выводить всё равно не выводит. У меня IE6.
AlexGousev Я вот с багом в ИЕ так и не справился http://php.ru/forum/viewtopic.php?t=9896 //Извините за оффтоп.