0

请有人告诉我为什么第一行得到索引值 1 但每隔一个新行也得到 1 而不是 2,3,4 等等。

<!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在每个中给出 a 而不是 id并为行input/select给出 a id。使用起来会更容易。正如@HMR所说，在克隆 thetr和inputsid时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 回答