jQuery从具有特定类的窗体中选择行

我目前无法正确选择选择器。 我要做的是得到一行，它有一个特定的类名，并且在一个有另一个类名的表单中。我的html页面中有两个表单，它们都有一行具有相同的类名。现在，jQuery选择第一个，然后第二个什么也不做。 基本上，我在表单中向表中添加一行输入，并且我希望能够分别在两个表单中添加该行

以下是我添加行的代码：

$('input.add').on('click', function(e){
    e.preventDefault();
    var $class = $(this).closest('form').attr('class').split(' ')[0];
    var $clone = $('tr.addRow:last').clone();

    if($clone.children().hasClass('auto_increment'))
    {
        var $nbre = $clone.children().first().text();
        $clone.children().first().text(++$nbre);
    }               
    $clone.wrap('<div>');
    var newRow = $clone.parent().html();

    $('tr.addRow:last').after(newRow);              
});

$（'input.add'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var$class=$（this）.closest（'form'）.attr（'class'）.split（''）[0]；
var$clone=$（'tr.addRow:last'）.clone（）；
if（$clone.children（）.hasClass（'auto_increment'））
{
var$nbre=$clone.children（）.first（）.text（）；
$clone.children（）.first（）.text（++$nbre）；
}               
$clone.wrap（“”）；
var newRow=$clone.parent（）.html（）；
$（'tr.addRow:last'）。在（newRow）之后；
});

是的，这是在jQuery加载之后。 正如您所看到的，我得到了表单的类名，但最后一行中的选择器不正确。 谢谢你，本

HTML:

<form class="Items next_page_form">
            <fieldset>
                <legend>Items</legend>
                <table class="table_spacing" id="removableData">
                    <tr>
                        <td>ITEM</td>
                        <td>QT&Eacute</td>
                        <td>DESCRIPTION</td>                            
                        <td></td>
                    </tr>
                    <tr class="addRow">
                        <td class="auto_increment">1</td>
                        <td><input type="number" name="quantity"></td>
                        <td><textarea name="description"></textarea></td>                           
                        <td><input type="button" class="removeData" style="margin-left:5px; background-image:url(./images/delete.jpg); width:30px; height:30px; background-size:100%"></td>
                    </tr>
                    <tr>
                        <td colspan="4"><input type="button" class="add" value="Ajouter" style="margin-right:15px; margin-left:10px;"><input type="button" class="remove" value="Enlever"></td>
                    </tr>
                </table>
            </fieldset>
        </form> 
        <form class="envoi next_page_form">
            <fieldset>
                <legend>Envoi</legend>
                <table class="table_spacing">
                    <tr>
                        <td>NO</td>
                        <td>DESTINATAIRE</td>
                        <td>CONTACT</td>
                        <td>COMMENTAIRE</td>
                    </tr>
                    <tr class="addRow">
                        <td class="auto_increment">1</td>
                        <td>
                            <select name="recipient">
                            </select>
                        </td>
                        <td>
                            <select name="contact">
                            </select>
                        </td>
                        <td><textarea name="comments"></textarea></td>
                    </tr>
                    <tr>
                        <td colspan="4"><input type="button" class="add" value="Ajouter" style="margin-right:15px; margin-left:10px;"><input type="button" class="remove" value="Enlever"></td>
                    </tr>
                </table>
            </fieldset>
        </form>     

项目
项目
QTÉ
描述
1.
恩沃伊
不
目的地
接触
评论
1.

首先，您没有第二种形式的

类为

addRow

。其次，您的选择器只需选择当前表单中类为

addRow

的

。因此，使用jQuery遍历，您可以编写：

$(this).closest('form').find('tr.addRow:last')

无论何时需要当前表单中的最后一个addRow

以下是完整的重构代码：

$('input.add').on('click', function(e){
    e.preventDefault();
    var form = $(this).closest('form');
    var $class = form.attr('class').split(' ')[0];
    var $clone = form.find('tr.addRow:last').clone();
    if($clone.children().hasClass('auto_increment'))
    {
        var $nbre = $clone.children().first().text();
        $clone.children().first().text(++$nbre);
    }               
    $clone.wrap('<div>');
    var newRow = $clone.parent().html();
    form.find('tr.addRow:last').after(newRow);              
});

$（'input.add'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var form=$（this）.closest（'form'）；
var$class=form.attr（'class'）.split（''）[0]；
var$clone=form.find（'tr.addRow:last'）.clone（）；
if（$clone.children（）.hasClass（'auto_increment'））
{
var$nbre=$clone.children（）.first（）.text（）；
$clone.children（）.first（）.text（++$nbre）；
}               
$clone.wrap（“”）；
var newRow=$clone.parent（）.html（）；
form.find（'tr.addRow:last'）。在（newRow）之后；
});

---

您可以简单地以表父级为目标，然后查找addRow类的最后一个

$（'input.add'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var table=$（this）.closest（'table'）；
var$class=table.attr（'class'）.split（''）[0]；
var$clone=table.find（'tr.addRow:last'）.clone（）；
var cloneChildren=$clone.children（）；
if（cloneChildren.hasClass（'auto_increment'））
{
var$nbre=cloneChildren.first（）.text（）；
cloneChildren.first（）.text（++$nbre）；
}
$clone.wrap（“”）；
var newRow=$clone.parent（）.html（）；
table.find（'tr.addRow:last'）。在（newRow）之后；
});

jQuery遍历是什么意思？谢谢你的回答，但他们还是搞混了。顺便说一下，我更新了html文件以添加第二个addRowclass@ben_thibsjQuery遍历是使用jQuery方法（例如.closest（））来遍历DOM（基本上是HTML元素树）。你看到我的演示了吗？就我测试而言，它们没有混淆。你能再详细一点吗？我做了一个删除输入，做了同样的事情，删除对两种形式都有效。。。我有一个alert方法向我显示表单html，它向我显示了一个好的方法，但也许我需要将它存储在一个变量中？我现在这样做：$（this.nexist（'form'）。find（'tr.addRow:last'）。after（newRow）@ben_thibs这样就可以从两个表单中删除行了？您没有在原始代码中包含删除代码，所以我不知道它有问题。如果你想更新你原来的问题，我会看看我能做什么。不，删除按钮的工作方式是正确的。如果我在第二个表单中推它，它只会从第二个表单中删除一行，这就是我想要的方式。但是添加按钮在好的位置添加行，但不是第一个表单案例中的好类型。。。

$('input.add').on('click', function(e){
    e.preventDefault();
    var table = $(this).closest('table');
    var $class = table.attr('class').split(' ')[0];
    var $clone = table.find('tr.addRow:last').clone();
    var cloneChildren = $clone.children();

    if(cloneChildren.hasClass('auto_increment'))
    {
        var $nbre = cloneChildren.first().text();
        cloneChildren.first().text(++$nbre);
    }

    $clone.wrap('<div>');
    var newRow = $clone.parent().html();
    table.find('tr.addRow:last').after(newRow);              
});