Добавление содержимого в строку таблицы (<TR>) с помощью JavaScript? - PullRequest
Новая
       13

Добавление содержимого в строку таблицы (<TR>) с помощью JavaScript?

6 голосов
/ 25 января 2011

У меня есть следующая таблица: 

<table>
 <tr>
   <td>col 1</td><td>col2</td>
 </tr>
 <tr id="insert">
   <td>field</td><td>Field 2</td>
 </tr>
 <tr>
   <td>another field</td><td>one more field</td>
 </tr>
</table>

Теперь проблема в том, что мне нужно динамически вставлять новые строки ПОСЛЕ среднего ряда (id = insert). У меня есть пользовательская функция JavaScript для вставки elementsAFTER элемента с помощью вызова insertBefore для следующего элемента.

Новые строки успешно создаются с использованием следующего JavaScript: 

var new_row = document.createElement('tr');
new_row.innerHTML="<td>test</td>";
insertAfter(document.getElementById("insert"), new_row);

Однако новая строка отказывается принимать любое простое форматирование html с использованием innerHTML. Окончательный вывод новой строки выглядит примерно так: 

<tr>test</tr>

Вы видите, что он не хочет выводить указанное мной. Реальный сценарий намного сложнее, и поэтому, к сожалению, добавление каждого из них вручную с помощью appendChild или аналогичной функции будет слишком трудоемким и, вероятно, довольно ресурсоемким. В любом случае я могу просто добавить «кусок html» в эту строку таблицы и в этом блоке определить столбцы таблицы?

Я сбит с толку, любая помощь очень ценится.

Ответы [ 2 ]

7 голосов
/ 25 января 2011

Вы можете использовать собственный метод insertCell() для вставки ячеек.

Дайте попробовать:

Пример: http://jsfiddle.net/VzTJa/

var new_row = document.createElement('tr');
new_row.insertCell(0).innerHTML = "test";
new_row.insertCell(1).innerHTML = "test2";

или вы можете сделать это без функции insertAfter(), используя insertRow().

Пример: http://jsfiddle.net/VzTJa/1/

var insert = document.getElementById("insert");
var new_row = insert.parentNode.insertRow( insert.rowIndex + 1 );
new_row.insertCell(0).innerHTML = "test";
new_row.insertCell(1).innerHTML = "test2";

Попробуйте этот обходной путь:

Пример: http://jsfiddle.net/VzTJa/2/

var temp = '<table><tbody><tr>';
var close_temp = '</tr></tbody></table>';
var temp_div = document.createElement('div');


var html_to_insert = '<td>tester</td><td>tester</td>';

temp_div.innerHTML = temp + html_to_insert + close_temp;
insertAfter(document.getElementById("insert"), temp_div.firstChild.firstChild.firstChild);

temp_div.removeChild(temp_div.firstChild);

В основном создает пару строк, представляющих открывающий и закрывающий теги таблицы. Вы объединяете его со своим контентом и устанавливаете его как innerHTMl временного div, затем выбираете нужную строку и делаете .appendChild().

Может быть, есть лучший способ, или вы можете найти способ улучшить этот.

Я придумал это после того, как взглянул на решение в этой статье от парня, который, очевидно, работал в IE и частично отвечает за анализатор.

2 голосов
/ 25 января 2011

Если вы можете использовать jQuery, попробуйте метод добавления из него. jQuery добавление ссылки

Если вы считаете, что производительность является проблемой, вы можете найти улучшение, создав динамический DOM, который вы хотите добавить в javascript перед , добавив его к фактическому элементу HTML DOM, который сделает его видимым , Это позволит свести к минимуму количество перерисовок.

...