如何动态地将新列添加到 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 因为那是列名

原文由 Anthony 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
});

这将向每一行添加一个新列，包括一个计数变量，该变量作为名称应用于第一行，并应用于后续行复选框的名称属性。

考虑使用 th 表头元素，这样你就不需要我正在做的索引检查，而且它在语义上更正确。

我省略了用户为列输入名称的部分，但如您所见，您可以将 iter 值替换为最后的值。

原文由 GNi33 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

现代纯 JavaScript 解决方案：

 const 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 。随意更改它以满足您的需要。

原文由 aloisdg 发布，翻译遵循 CC BY-SA 4.0 许可协议