Question

我想要一个“添加行”和“添加列”按钮系统的东西。我的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

Answer 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);
 });
}

请参见此工作Fiddle Example！

更多行和更多列jQuery

1 个答案: