如何使用正确的单元格数动态添加 table 列和行？

Question

我希望动态地向 table 添加行和列，并且我已经深入研究了如何使用 jQuery 执行此操作。我已经成功地添加了具有正确行数的列并删除了整行。我没能做的是添加一个列数正确的行并删除整个列（所有行都消失了！）。

这是我目前的脚本：

jQuery(window).load( function($) {

// Add column function
jQuery('#ldrm-add-col').click(function() {
    jQuery('.ldrm thead tr').append('<th class="rb-top">Test</th>');
    jQuery('.ldrm tr:gt(0)').append('<td>Col</td>');
    console.log('autocomplete');
});

// Add row function
jQuery('#ldrm-add-row').click(function() {
    jQuery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">Remove</span></td><td class="rb-left">Test</td><td>Test</td></tr>');
    console.log('autocomplete');
});

// Remove row function
jQuery(document).on('click','td.remove-row .btn', function() {
    jQuery(this).closest('tr').remove();
});

});

因此，如果我从三列开始并单击“添加行”，它现在可以正常工作，因为它添加了 3 行。但是，如果我单击添加列并附加第 4 列，然后单击添加行，则会缺少一个单元格，因为脚本不知道添加了另一列。

http://jsfiddle.net/2kws0aLx/

关于如何改进添加行脚本以考虑任何动态添加的列的任何建议？

Answer 1

对于添加行函数，您需要考虑 table 中当前的列数。我做了一个快速而肮脏的 IIFE 来展示我的意思。

http://jsfiddle.net/2kws0aLx/1/

// Add row function
jQuery('#ldrm-add-row').click(function() {
    // -2 to account for the two empty th's at top left
    var numOfCol = $('thead th').length - 2; 
    jQuery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">Remove</span></td><td class="rb-left">Test</td>' + (function() { var str = ''; for(var i=0; i < numOfCol; i++) { str += '<td>Test</td>'; } return str; })());
    console.log('autocomplete');
});

如何使用正确的单元格数动态添加 table 列和行？

How to add table columns and rows dynamically with the correct number of cells?

html

javascript

jquery

html-table