如何动态地将新列添加到HTML表

Question

我有一个表,我目前正在动态添加行:http://jsfiddle.net/fmuW6/5/

现在,我想在表格中添加一个新列,只需单击一个按钮即可.用户将在文本框中输入列标题.

我怎样才能做到这一点？如果用户添加4行,则该Add a new Column按钮应该处理所有现有行(在每个行中添加复选框).

更新

我想在行级添加列名和复选框.

所以我添加了用户输入列名的文本框:http://jsfiddle.net/fmuW6/10/

<input type=text placeholder='columnname'/>
<button type="button" id="btnAddCol">Add new column</button></br></br>

因此,当用户单击按钮时,列名应该是文本框中的值,而行级应该是复选框.所以基本上新列应该附加到tr表中的所有列,除了第一行,因为那是列名

Answer 1

我用一个小例子更新了你的小提琴,你怎么能这样做.

jsFiddle - 链接

var myform = $('#myform'),
    iter = 0;

$('#btnAddCol').click(function () {
     myform.find('tr').each(function(){
         var trow = $(this);
         if(trow.index() === 0){
             trow.append('<td>Col+'iter+'</td>');
         }else{
             trow.append('<td><input type="checkbox" name="cb'+iter+'"/></td>');
         }
     });
     iter += 1;
});

这会向每一行添加一个新列,包括一个计数变量,该变量将作为名称应用于第一行,并应用于以下行的复选框的name-attribute.

考虑使用th- 表头的元素,这样你就不需要我正在进行的索引检查,并且它在语义上更正确.

我省略了用户为列添加名称的部分,但正如您所看到的,您可以将iter- 值替换为最后的值.

Answer 2

现代纯 JavaScript 解决方案：

function addColumn() {
    [...document.querySelectorAll('#table tr')].forEach((row, i) => {
        const input = document.createElement("input")
        input.setAttribute('type', 'text')
        const cell = document.createElement(i ? "td" : "th")
        cell.appendChild(input)
        row.appendChild(cell)
    });
 }
 
 document.querySelector('button').onclick = addColumn

<table id="table">
  <tr><th><input type="text" value="test 1" /><th/></tr>
  <tr><td><input type="text" value="test 2" /><td/></tr>
</table>

<button type="button">add column</button>

第一行将包含一个th而不是td。每个新单元格都包含一个input. 随意更改它以满足您的需要。