我有一个表，我目前正在向其中动态添加行：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表中除了第一行之外的所有列，因为那是列名
我用一个小例子更新了你的小提琴，你如何做到这一点。
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- 值替换为最后的值。
现代纯 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>第一行将包含 ath而不是td。每个新单元格都包含一个input. 随意更改它以满足您的需要。
答案有效，但这里仍然是我们使用 thead 和 tbody 的另一种方式！
JS
$('#irow').click(function(){
if($('#row').val()){
$('#mtable tbody').append($("#mtable tbody tr:last").clone());
$('#mtable tbody tr:last :checkbox').attr('checked',false);
$('#mtable tbody tr:last td:first').html($('#row').val());
}
});
$('#icol').click(function(){
if($('#col').val()){
$('#mtable tr').append($("<td>"));
$('#mtable thead tr>td:last').html($('#col').val());
$('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="checkbox">'))});
}
});
使用此代码添加新列：
$('#btnAddCol').click(function () {
$("tr").append("<td>New Column</td>");
});
但是您需要将第一行的值更改为带有文本和其他内容的值以包含<input type="checkbox" />. 最好是
看看 jsFiddle ...................... http://jsfiddle.net/fmuW6/8/
$(document).ready(function () {
$('#btnAdd').click(function () {
var count = 3, first_row = $('#Row2');
while(count-- > 0) first_row.clone().appendTo('#blacklistgrid');
});
$('#btnAddCol').click(function () {
$("#blacklistgrid tr").each(function(){
$(this).append("<td>test</td>");
})
});
});
使用 4 列的表：
我可以像这样动态地添加值：
var TableId = "table_" + id;
var table = $("#" + TableId );
table.find("tbody tr").remove();
table.append("<tr><td>" + "1" + "</td><td>" + "lorem" + "</td><td>" + "ipsum" + "</td><td>" + "dolor" + "</td></tr>");
最终结果将是：
