1

テーブルに任意の数の行と列を追加できるように、動的テーブルを作成したいと考えています。行を動的に追加することに成功しましたが、テーブルに列を追加すると問題が発生します。列を追加するには、ユーザーが を使用して列の columnName を指定する必要がありますwindow.prompt。addcolumn[列の追加] をクリックすると、2 番目の列に列 (テキスト ボックスなし) が追加されます。ボタンに最も近い列 (テキスト ボックスと columnName を含む) を追加します。

ここに私のテーブルがあります：

<table class="dynatable">
        <thead>
            <tr>
                <th><button class="add">Add</button></th>
                <th>ID</th>
                <th>Name</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th><button style="width: 100px; height: 25px" class="addColumn">Add Column</button></th>
            </tr>
        </thead>
        <tbody>
            <tr class="prototype">
                <td><button class="remove">Remove</button>
                <td><input type="text" name="id[]" value="0" class="id" /></td>
                <td><input type="text" name="name[]" value="" /></td>
                <td><input type="text" name="col4[]" value="" /></td>
                <td><input type="text" name="col3[]" value="" /></td>
            </tr>
    </table>

私のjsは次のとおりです。

/// <reference path="jquery-1.8.2.min.js" />
$(document).ready(function () {
    var id = 0;
    // Add button functionality
    $("table.dynatable button.add").click(function () {
        id++;
        var master = $(this).parents("table.dynatable");
        // Get a new row based on the prototype row
        var prot = master.find(".prototype").clone();
        prot.attr("class", "")
        prot.find(".id").attr("value", id);
        master.find("tbody").append(prot);
    });

    // Remove button functionality
    $("table.dynatable button.remove").live("click", function () {
        $(this).parents("tr").remove();

    });

    $("table.dynatable button.addColumn").click(function () {
        var columnName = window.prompt("Enter Column name", "");
        if (columnName) {
            $('table').find('tr').each(function () {
                $(this).find('td').eq(0).after('<td></td>');
                //$(this).closest('td').after('<td></td>');
            });
        }
    });
});

ライブデモjsfiddle

編集1:

列を追加する前:列を追加する前に 列テーブルを追加した後:列追加後

デモについてはjsfiddleを参照してください

4

2 に答える 2

1 
$("table.dynatable button.addColumn").click(function () {
    var columnName = window.prompt("Enter Column name", "");
    $('table').find('th').last().before('<th>'+columnName+'</th>');/*Add this line*/
    $('table').find('tr').each(function () {
        $(this).find('td').eq(0).after('<td></td>');
    });

作業フィドル: フィドル

于 2013-07-31T06:14:23.440 に答える