Я пытаюсь добавить несколько строк в таблицу HTML, но это не удается - PullRequest
Новая
       0

Я пытаюсь добавить несколько строк в таблицу HTML, но это не удается

3 голосов
/ 14 мая 2011

Примечание: это должен быть пост вики сообщества

Следующий код, использующий простые методы dom, не может добавить строки в таблицу.В чем проблема? 

<html>
<head>
<title>Javascript Test</title>
<script>
function addRow() {
    var mytable = document.getElementById('mytable');

    var row = document.createElement('tr');
    var cell = document.createElement('td');
    var text = document.createTextNode('This is a row');

    cell.appendChild(text);
    row.appendChild(cell);
    mytable.appendChild(row);
}
</script>
</head>
<body>
<form action="#">

<table id="mytable">
<tr>
    <td>This is a row</td>
</tr>
</table>

<input type="button" onclick="addRow()" value="Add A Row"/>
</form>
</body>
</html>

Ответы [ 2 ]

9 голосов
/ 14 мая 2011

Проблема здесь в том, что правильная структура элемента <table> отсутствует.При работе с таблицами базовая структура выглядит следующим образом: 

<table>
<thead>
<tr>
  <th>Heading for the table</th>
</tr>
</thead>
<tbody>
  <tr>
    <td>A row of data</td>
  </tr>
</tbody>
</table>

Логика заключается в том, что при работе с таблицами необходимо хранить метки столбцов и фактические данные отдельно.Поскольку большинство браузеров заполняют <tbody> как часть процесса исправления неработающего HTML, мало кто это понимает.Когда браузер видит, что вы добавляете <tr>, он не знает, пытаетесь ли вы добавить его к <thead> или <tbody>, поэтому происходит сбой.

Ниже показано правильноеМетод добавления строк: 

<html>
<head>
<title>Javascript Test</title>
<script>
function addRow() {
    var mytbody = document.getElementById('mytbody');

    var row = document.createElement('tr');
    var cell = document.createElement('td');
    var text = document.createTextNode('This is a row');

    cell.appendChild(text);
    row.appendChild(cell);
    mytbody.appendChild(row);
}
</script>
</head>
<body>
<form action="#">

<table id="mytable">
<tbody id="mytbody">
<tr>
    <td>This is a row</td>
</tr>
</tbody>
</table>

<input type="button" onclick="addRow()" value="Add A Row"/>
</form>
</body>
</html>
0 голосов
/ 13 апреля 2015

Необходимо добавить любую дополнительную строку, затем взять первого потомка tableID и затем использовать метод appendChild (): 

var tbl=document.getElementById("tbl");
var row=document.createElement("tr");
var cel=document.createElement("td");
cel.innerHTML='sometext';
row.appendChild(cel);
tbl.children[0].appendChild(row);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...