Jquery在创建新行时不向最后一行添加索引

Jquery not adding index to last row when creating a new row

本文关键字：一行索引添加最后创建新行时 Jquery 更新时间：2023-09-26

谁能告诉我为什么第一行得到和索引值为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>

我似乎不能弄清楚如何添加一个新的行，每次增加每个表元素的"名称"1每次准备使用AJAX帖子。

新行创建错误。艺人和专辑元素name总是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);
};

演示

另外，考虑在每个input/select中给出一个class而不是一个id，并给行一个id。这样更容易处理。正如@HMR所说，当克隆tr时，inputs和select的id也被克隆，添加行然后导致具有相同id的多个元素。这不是很好，确保每个元素都是唯一的ID

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