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 に答える