Question

请有人告诉我为什么第一行得到并且索引值为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时，似乎无法计算出如何添加新行。

Answer 1

新行创建错误。艺术家和专辑元素名称始终为曲目[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);
};

DEMO

另外，请考虑在每个class中提供input/select而不是ID，并为该行提供id。使用它会更容易。正如 @HMR 所说，当克隆tr同时克隆inputs和select id时，添加该行会导致多个元素具有相同的id。这不好，确保每个元素都是唯一ID

Answer 2

如果只计算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);

    };

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

2 个答案: