使用输入框向表中添加列

Question

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

EDIT1：

在添加列之前： 添加Column表后应该是：

请参阅jsfiddle演示

Answer 1

尝试

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

演示：Fiddle

Answer 2

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

工作小提琴：Fiddle