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

Question

我希望动态地将行和列添加到表中，并且我已经深入研究了如何使用 jQuery 来做到这一点。我已经成功地添加了具有正确行数的列并删除了整行。我无法做的是添加一个具有正确列数的行并删除一个 ENTIRE 列（所有行都消失了！）。

这是我目前的脚本：

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

对于添加行功能，您需要考虑表中当前的列数。我做了一个快速而肮脏的 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');
});