jQuery在名称中插入具有行号的行 [英] jQuery insert row with row number in names

问题描述

我有这样的标记

<table id="document-data">
    <tr>
        <td>Name</td>
        <td>Title</td>
        <td>Select Test</td>
    </tr>
    <tr class="new-document-meta">
        <td><input type="text" name="name"></td>
        <td><input type="text" name="title"></td>
        <td>
            <select name="select-test[0]">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </td>
    </tr>
</table>
<a href="#" id="add-row">Add row</a>

现在在这里您可以看到我有添加行.因此，当我单击添加行时，它将仅向表中添加另一行.同样在添加的另一行中，名称字段将添加行名称，如下所示 对于第二行，标题的名称标签将变为title_2，依此类推. 因此，我将我的js做成这样

Now here you can see I have the add-row. So when I will click on add-row it will just add another row to the table. Also with another added row the name field will add the row name like this for 2nd row the name tag for title will become title_2 like so on. So for that I made my js like this

$(document).ready(function() {
        $('a#add-row').click(function() {
            var Rows = $('table#document-data tr').length;
            var ParentClone = $('table#document-data tr.new-document-meta').last();
            var ParentHtml = $('table#document-data tr').last();
            ParentClone.clone().insertAfter(ParentHtml).find("select").each(function() {
                var $item=$(this);
                $item.prop("name","select-test["+Rows+"]");
            });
            $(ParentClone).find('input').each(function() {
                $(this).attr('name', $(this).attr('name') + Rows);
            });
        });
    });

在这里，它对于选择标签工作正常，但对输入标签却无效.有人可以帮我吗?

Here it is working fine for select tag but its not working for inputs tag. So can someone help me here?

推荐答案

尝试一下:

ParentClone.find('input').each(function() {
                $(this).attr('name', $(this).attr('name') + Rows);
            });

不需要$左右.

这篇关于jQuery在名称中插入具有行号的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！