1

我想制作一个动态表，以便可以将任意数量的行和列添加到表中。我成功地动态添加行，但在表中添加列时遇到问题。对于添加列，我希望用户通过使用为列提供 columnName window.prompt。当我单击添加列时，它将列（不带文本框）添加到第二列，我想添加最接近addcolumn按钮的列（带有文本框和 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

4

尝试

$(document).ready(function () {
    var id = 0;
    // Add button functionality
    $("table.dynatable button.add").click(function () {
        id++;
        var master = $(this).closest("table.dynatable");
        // Get a new row based on the prototype row
        var prot = master.find("tr.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 $this = $(this), $table = $this.closest('table')
        var columnName = window.prompt("Enter Column name", "");

        $('<th>' + columnName +'</th>').insertBefore($table.find('tr').first().find('th:last'))

        var idx = $(this).closest('td').index() + 1;
        $('<td><input type="text" name="col' + idx + '[]" value="" /</td>').insertBefore($table.find('tr:gt(0)').find('td:last'))
    });
});

演示：小提琴

于 2013-07-31T06:11:32.590 回答
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 回答