Question

我希望动态地将行和列添加到表中，并且我已经开始研究如何使用jQuery执行此操作。我已成功，能够添加具有正确行数的列并删除整个行。我无法做的是添加一行CORRECT列数并删除一个整列（所有行都消失！）。

这是我到目前为止的脚本：

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

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

1 个答案: