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の追加ボタンをクリックすると追加され、行の追加ボタンをクリックすると行が追加され、正常に動作しますが、問題に直面しています.3つの列と2つの行を3つのtdsで追加するとしますが、後でさらに列を追加したい場合2行を作成しても、それらの行のtdsは増加しません。私の問題を理解していただければ幸いです。ありがとう。jsfiddle でもこれを試してください。td = calculated numbers of th

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 に答える