0

誰かが最初の行が1のインデックス値を取得する理由を教えてもらえますが、他のすべての新しい行も2、3、4の代わりに1を取得します。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>

<body>
    <form>
        <table>
            <thead>
                <tr>
                    <th scope="col">Track</th>
                    <th scope="col">Album</th>
                    <th scope="col">Artist</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td><input name="track[0]" id="track"></td>
                    <td><input name="album[0]" id="album"></td>
                    <td>
                        <select name="artist[0]" id="artist">
                            <option value="">Please select</option>
                            <option value="1">Joe Bloggs</option>
                            <option value="2">Jack Bloggs</option>
                            <option value="3">Tina Bloggs</option>                              
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

    <button>Add Row</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
    $(document).ready(function($)
    {
        // trigger event when button is clicked
        $("button").click(function()
        {
            // add new row to table using addTableRow function
            addTableRow($("table"));
            // prevent button redirecting to new page
            return false;
        });

        function addTableRow(table)
        {   

            var $tr = $(table).find("tr:last").clone();
            alert($tr);
            var fname = $("#track").attr("name");
              var nid = fname.match(/\[(.*?)\]/g);
            var idx = nid[0];
            idx = idx.replace(/[[\]]/g,'')
            var n = fname.split("[");

            idx = parseInt(idx) + 1;
            $tr.find("input,select").attr("name", n[0] + "[" + idx + "]");

            $(table).find("tbody tr:last").after($tr);

        };
    });
    </script>       
</body>

AJAX投稿を使用する準備ができるたびに、各テーブル要素の「名前」を1ずつ増やすたびに、新しい行を追加する方法を理解できないようです。

4

2 に答える 2

1

新しい行が間違って作成されています。アーティストとアルバムの要素名は常にtrack[0]です

このようなことをするのは簡単ではないでしょうか？

function addTableRow(table) {

    var index = $(table).find("tbody tr").length;
    var $tr = $(table).find("tr:last").clone();
    $tr.find("input,select").each(function (i, k) {
        var old_name = $(k).attr("name");
        var new_name = old_name.replace(index-1, index);
        $(k).attr("name", new_name);
    });

    $(table).find("tbody tr:last").after($tr);
};

デモ

また、classすべてにidの代わりにを指定し、行input/selectにaを指定することを検討してidください。作業が簡単になります。@HMRが言ったように、とIDのクローンをtr作成inputsするとselect、行を追加すると、同じIDを持つ複数の要素が作成されます。これは良くありません。各要素が一意のIDであることを確認してください

于 2013-03-27T12:30:26.480 に答える
0

代わりに数えるtrのはどうですか？tbody

    function addTableRow(table)
    {   
        var $tr = table.find("tbody").find("tr").last().clone();
        var fname = $("#track").attr("name");
        var nid = fname.match(/\[(.*?)\]/g);
        var new_idx = table.find('tbody').find('tr').length;
        var n = fname.split("[");

        idx = parseInt(idx) + 1;
        $tr.find("input,select").attr("name", n[0] + "[" + new_idx + "]");

        $(table).find("tbody tr:last").after($tr);

    };
于 2013-03-27T12:36:00.603 に答える