Манипуляция таблицами JavaScript

У меня есть таблица с одним столбцом и около десяти строк. Первый столбец содержит строки с текстом в виде заголовков строк, "заголовок 1", "заголовок 2". Второй столбец содержит поля для ввода пользователем данных (текстовые поля и флажки).

Я хочу иметь кнопку вверху с надписью "Добавить новый..." и создать третий столбец с теми же полями, что и первый столбец. Если пользователь снова нажмет на него, он создаст еще один пустой столбец с полями (как во втором столбце).

Кто-нибудь знает об эффективном способе управления DOM для достижения этого?

Я экспериментирую с div и TABLES, но я нахожусь на моем третьем дне этого, и это кажется сложнее, чем должно быть.

2 ответа

Забавное упражнение. Благодаря подсказке AviewAnew я мог бы это сделать.

function AddColumn(tableId)
{
 var table = document.getElementById(tableId);
 if (table == undefined) return;
 var rowNb = table.rows.length;
 // Take care of header
 var bAddNames = (table.tHead.rows[0].cells.length % 2 == 1);
 var newcell = table.rows[0].cells[bAddNames ? 1 : 0].cloneNode(true);
 table.rows[0].appendChild(newcell);
 // Add the remainder of the column
 for(var i = 1; i < rowNb; i++)
 {
 newcell = table.rows[i].cells[0].cloneNode(bAddNames);
 table.rows[i].appendChild(newcell);
 }
}

со следующим HTML:

<table border="1" id="TSO">
<thead>
<tr><th>Fields</th><th>Data</th></tr>
</thead>
<tbody>
<tr><td>Doh</td><td>10</td></tr>
<tr><td>Toh</td><td>20</td></tr>
<tr><td>Foo</td><td>30</td></tr>
<tr><td>Bar</td><td>42</td></tr>
<tr><td>Ga</td><td>50</td></tr>
<tr><td>Bu</td><td>666</td></tr>
<tr><td>Zo</td><td>70</td></tr>
<tr><td>Meu</td><td>80</td></tr>
</tbody>
</table>


Что-то вдоль линий

function(table)
{
 for(var i=0;i

licensed under cc by-sa 3.0 with attribution.