Как добавить <tr> тег в <table> тег динамически в чистом javascript?

кода в HTML файл выглядит следующим образом:Как добавить <tr> тег в <table> тег динамически в чистом javascript?

<html> 
    <script type="text/javascript"> 
     var records=[{"name":"Fred","id":"123"},{"name":"Jim","id":"456"}]; 
    </script> 
    <table id="tb1"> 
     <tr id="row1"> 
      <td style="background-color:gray" id="name">name</td><td style="background-color:gray" id="id">id</td> 
     </tr> 
     <tr id="row2"><td>shouldn't be added here</td><td>neither here</td></tr> 
    </table> 
</html>

Я хочу, чтобы добавить содержимое записей между row1 и row2 в чистом JavaScript (без какой-либо третьей стороны Javascript рамки) Что я должен делать.?

источник

2014-01-14 kenshinji

Вы еще что-нибудь пробовали? –

хорошо для начала, он написал неверный JSON '{{" name ":" Jim "," id ":" 456 "}}': P –

@AnilShanbhag: Это не JSON. Это * неверно. :-) Контекст - это король, это инициализатор объекта JavaScript (или это было бы так или иначе), поскольку он находится в коде JavaScript. –

Вы не добавляете в «теги», вы добавляете к элементам.

В общем случае вы создаете элементы через document.createElement (или назначая строку, содержащую HTML, для свойства существующего элемента innerHTML).

Вы добавляете элементы в качестве детей других элементов, используя appendChild или insertBefore.

Так, например, вот как вы могли бы добавить строку, содержащую две ячейки таблицы перед тем в id="row2" в вашей таблице:

var newRow = document.createElement('tr'); 
newRow.appendChild(document.createElement('td')); // The first cell 
newRow.appendChild(document.createElement('td')); // The second cell 
var row2 = document.getElementById("row2"); 
row2.parentNode.insertBefore(newRow, row2);  // Insert it

Однако, как Heitor points out, для таблиц существуют специальные методы, которые можно использовать вместо которые являются немного менее многословным:

insertRow на столе и TBODY/THEAD элементов
insertCell на элементах строки

Вот код выше, используя insertCell:

var newRow = document.createElement('tr'); 
newRow.insertCell(-1);       // The first cell 
newRow.insertCell(-1);       // The second cell 
var row2 = document.getElementById("row2"); 
row2.parentNode.insertBefore(newRow, row2);  // Insert it

Мы могли также использовать insertRow:

var row2 = document.getElementById("row2");   // Get existing row 
var newRow = row2.parentNode.insertRow(row2.rowIndex); // Create and insert new row 
newRow.insertCell();         // The first cell 
newRow.insertCell();         // The second cell

... но тогда мы будем вносить изменения к отображаемому DOM несколько раз (добавив пустую строку, а затем добавив ячейку, а затем добавив другую ячейку), которой лучше избежать, если это возможно. В первых двух примерах мы создали строку и добавили ее ячейки, прежде чем добавить эту структуру в DOM, выполнив один из живых манипуляций DOM.

DOM-API, может быть многословным и немного неудобно, и реализации его может варьироваться в зависимости немного браузера в браузер (хотя все вышесказанное является надежным). Вы, очевидно, можете использовать, но вы также можете использовать любую из нескольких хороших библиотек JavaScript для DOM, чтобы получить информацию о совместимости с браузером, и получить много полезной полезной функции.

источник

2014-01-14 15:56:45

Назначение строки, содержащей HTML, для свойства innerHTML существующего элемента, так я предпочитаю, но как я могу убедиться, что строка содержимого, которая содержит html-тег, который я хочу добавить, будет находиться между id = "row1 "и id =" row2 ". – kenshinji

@kenshinji: вы должны создать элемент строки, назначить разметку для ячеек 'innerHTML', а затем вставить элемент строки в таблицу. Но есть несовместимость браузеров вокруг таблиц и 'innerHTML', которые хорошая библиотека будет обрабатывать для вас. Примечание: всегда лучше использовать элемент «tbody» между «таблицей» и строками (некоторые браузеры могут автоматически вставлять его). Я использовал 'row2.parentNode' выше, чтобы перейти к возможной проблеме. –

Вместо этого вы можете использовать метод insertRow! 'var row = table.insertRow (0); // для вставки в верхнюю строку '' var row = table.insertRow (-1); // для вставки в нижний регистр – Heitor

Использование insertRow метод, чистый и точный!

var row = table.insertRow(0); // to insert in the top OR 
var row = table.insertRow(N); // to insert in the (N+1)-th line of the table OR 
var row = table.insertRow(-1); // to insert in the bottom

источник

2017-08-05 07:25:15 Heitor

'insertRow' абсолютно удобен, но для примера OP это будет плохой выбор, потому что вы будете многократно изменять отображаемую DOM. Лучше * в этом случае * построить строку и ячейки, а затем добавить их все сразу. (Его кузен 'insertCell' определенно удобен для случая OP.) –

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

Как добавить <tr> тег в <table> тег динамически в чистом javascript?

ответ

Смежные вопросы