0

我已经使用 jquery 构建了非常简单的动态 html 表生成器，请检查以下...

<button id="addcolumn">Add Column</button>
<button id="addrow">Add Row</button>

<table width="100%" border="1" cellpadding="0" cellspacing="0">

<thead id="theads">
    <tr>
        <th class="th" contenteditable>Heading</th>
        <th class="th" contenteditable>Heading</th>
    </tr>
</thead>

<tbody id="tbody">

</tbody>

</table>

jQuery

$(document).ready(function () { 

    //add head
    $('#addcolumn').click(function(){
        $('<th class="th" contenteditable>Heading</th>').appendTo('thead tr');
    });

    //add row
    $('#addrow').click(function(){
        var totalths = $('.th').length;

        var trcon = '<tr>';
        for (var i = 0; i < totalths; i++) {
            var trcon = trcon + ' <td class="td" align="center" contenteditable>Content</td>';
        }
        var trcon = trcon + ' </tr>';

        $(trcon).appendTo('tbody');

    });

});

这当前添加th单击添加列按钮并单击添加行按钮添加行td = calculated numbers of th，它工作正常，但我面临一个问题，假设我添加 3 列和 2 行 3 tds，但如果我想在之后添加更多列创建 2 行，它不会增加这些行中的 tds。我希望你能理解我的问题。谢谢。也可以在 jsfiddle中试试这个。

4

2 回答 2

3

你可以这样做：

$(document).ready(function () {
    var $cell = $('<td>', {
        'class': 'td',
        'align': 'center',
        'contenteditable': '',
        'text': 'Content'
    });

    var $header = $('<th>', {
        'class': 'th',
        'contenteditable': '',
        'text': 'Heading'
    });

    $('#addcolumn').click(function() {
        $header.clone().appendTo('thead tr');
        $cell.clone().appendTo('tbody tr');
    });

    $('#addrow').click(function(){
        var $row = $('<tr>');

        $('thead th').each(function() {
            $cell.clone().appendTo($row);
        });

        $row.appendTo('tbody');
    });
});

演示：http: //jsfiddle.net/prBZS/4/

于 2013-04-23T23:18:47.447 回答
1

在列添加按钮的事件处理程序中，只需将一个单元格添加到已经存在的行：

//add head
$('#addcolumn').click(function(){
  $('<th class="th" contenteditable>Heading</th>').appendTo('thead tr');
  $('<td class="td" align="center" contenteditable>Content</td>').appendTo('tbody tr');
});
于 2013-04-23T23:14:19.800 回答