[英]How to add a new column to an already existing html table using javascript
[英]How to dynamically add a new column to an HTML table
我有一个表,我目前正在向其中动态添加行: 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>
第一行将包含th
而不是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>");
})
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.