0

我想要一个“添加行”和“添加列”按钮系统的东西。我的html是：

<table border="2" id="the_table">
    <tr>
        <td><input name="value_1[]"/></td>
    </tr>
</table>

<a href="#" rel="add_row">Add Row</a> <a href="#" rel="add_column">Add Column</a>

我的 jQuery：

$(document).ready(function(){
    var table_id = "#the_table";

    jQuery.fn.renderTable = function() {
        var rowCount = $(table_id + ' tr').length;
        var colCount = 0;
        $(table_id + ' tr:nth-child(1) td').each(function () {
            if ($(this).attr('colspan')) {
                colCount += +$(this).attr('colspan');
            } else {
                colCount++;
            }
        });

        if($(this[0]).attr("rel") == "add_row") {
            var id = $(table_id + " input:last").attr("name");
            id = id.replace(/value_(\d+)/, function(match, number) {
                return 'value_' + (parseInt(number, 10) + 1);
            });
            var x = 0;
            var result = "<tr>";
            while (x != colCount) {
                result += '<td><input name="' + id + '" /></td>';
                x = x + 1;
            }
            result += "</tr>";
            $(table_id + ' tr:last').after(result);
        }
        if($(this[0]).attr("rel") == "add_column") {

        }
    };

    $('a').click(function(){
        $(this).renderTable();  

        return false;
    });
});

因此，当我单击添加行时，我希望它添加一行，但增加 php $_POST 的字段名称...并且添加列时，它必须添加一列并向下递增名称。所以我对 2 x 2 表的输出将是：

<table border="2" id="the_table">
    <tr>
        <td><input name="value_1[]"/></td>
        <td><input name="value_1[]"/></td>
    </tr>
    <tr>
        <td><input name="value_2[]"/></td>
        <td><input name="value_2[]"/></td>
    </tr>
</table>

有没有办法做到这一点？先感谢您！！:D

4

1 回答 1

1

基本上，您需要td为每个现有添加一个新的tr：

if ($(this[0]).attr("rel") == "add_column") {
 $(table_id + " tr").each(function() {
  var $this  = $(this),
    newInput = $("<input/>", {name:$this.find('td:last input').attr("name")}),
    newTD    = $("<td/>").append(newInput);

  $this.append(newTD);
 });
}

请参阅此工作小提琴示例！

于 2012-07-12T00:34:25.933 回答