Question

我正在尝试在网站上找到一个示例，我想保留所有section，div，table，thead，tbody标签以用于格式化目的。当我点击添加链接时，它可以在包含<div>的旧<input type="text" name="names" value="2" />之上添加包含<div>的新<input type="text" name="names" value="1" />。这不是我想要的，我想在旧的<div>下添加新的<section class=""> <div class="container"> <form name="addname" action="" method="post">' <table> <thead> <tr class="header"> <th>Name</th> </tr> </thead> <tbody> <div class="thewrapper"> <div> <tr> <td> <input type="text" name="names" value="1" /> </td> <td><a href="javascript:void(0);" class="addbutton">Add</a></td> </tr> </div> </tbody> </table> <input type="submit" value="Submit" /> </form> </div> </section> <script type="text/javascript"> $(document).ready(function() { var maxrow = 10; var addButton = $('.addbutton'); var wrapper = $('.thewrapper'); //Input field wrapper var field = '<div><tr><td><input type="text" name="names" value="2" /></td><td><a href="javascript:void(0);" class="removebutton" >Remove</a></td></tr></div>'; var y = 1; $(addButton).click(function() { if (y < maxrow) { y++; $(wrapper).append(field); } }); }); </script>。我知道这与嵌套选择器有关，但我无法弄清楚如何解决它。请提前帮助，谢谢。

{{1}}

Answer 1

它无效的原因是因为div不允许tbody的孩子。有些浏览器试图解决这个问题。在jsfiddle的safari中，它移动wrapper div在表之外和之上，所以当你附加它时它会附加但是它会附加到已经移到表格之上的div。因此，为什么它看起来像它的前期。尝试这样的事情，这样你就拥有合法的HTML。删除tr周围的包装DIV和DIV，只需在没有任何DIV的情况下附加到tbody。只需将tr直接附加到tbody。

即可

小提琴：https://jsfiddle.net/yfhbe32s/

HTML

<section class="">
    <div class="container">
        <form name="addname" action="" method="post">'
            <table>
                <thead>
                    <tr class="header">
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="text" name="names" value="1" />
                        </td>
                        <td><a href="javascript:void(0);" class="addbutton">Add</a></td>
                    </tr>
                </tbody>
            </table>
            <input type="submit" value="Submit" />
        </form>
    </div>
</section>

JS：

$(document).ready(function() {
    var maxrow = 10;
    var addButton = $('.addbutton');
    var wrapper = $('tbody'); //Input field wrapper
    var field = '<tr><td><input type="text" name="names" value="2" /></td><td><a href="javascript:void(0);" class="removebutton" >Remove</a></td></tr>';
    var y = 1;
    $(addButton).click(function() {
        if (y < maxrow) {
            y++;
            $(wrapper).append(field);
        }
    });
});

编辑：不能真正看到你在评论中发布的内容，但尝试将其删除。基本上它委托click事件。我们将单击附加到文档，并说在某些时候会有一个类removebutton的元素，当单击它时，它应该使用已定义的事件处理程序。委托事件非常适合在我们附加事件时可能在DOM中或不在DOM中的动态元素。事件处理程序上下文（删除按钮）然后查找其最接近的tr父项并删除它及其所有子项并同时更新计数器。

小提琴：https://jsfiddle.net/yfhbe32s/1/

$(document).ready(function() {
    var maxrow = 10;
    var addButton = $('.addbutton');
    var wrapper = $('tbody'); //Input field wrapper
    var field = '<tr><td><input type="text" name="names" value="2" /></td><td><a href="javascript:void(0);" class="removebutton" >Remove</a></td></tr>';
    var y = 1;
    $(addButton).click(function() {
        if (y < maxrow) {
            y++;
            $(wrapper).append(field);
        }
    });
    $(document).on('click', '.removebutton',
        function () {
            $(this).closest('tr').remove();
            y--;
        }
    );
});

Answer 2

您需要使用jQuery＆＃39; appendTo()，而不是append()。阅读here

.append（）和.appendTo（）方法执行相同的任务。主要区别在于语法特定，内容和目标的放置。使用.append（），方法前面的选择器表达式是插入内容的容器。另一方面，使用.appendTo（），内容在方法之前，作为选择器表达式或动态创建的标记，并插入到目标容器中。

请注意，我已切换您的变量

var maxrow = 10;
var addButton = $('.addbutton');
var wrapper = $('.thewrapper'); //Input field wrapper
var field = '<div><tr><td><input type="text" name="names" value="2" /></td><td><a href="javascript:void(0);" class="removebutton" >Remove</a></td></tr></div>';
var y = 1;
$(addButton).click(function() {
    if (y < maxrow) {
        y++;
        $(field).appendTo(wrapper);
    }
});

另请注意，您的HTML表格不正确。您不允许（至少它无效）将其他元素放在<tr>和<td>之前。您应该真正构建HTML：

<tbody class="thewrapper">
    <tr>
         <td>
            <input type="text" name="names" value="1" />
         </td>
         <td><a href="javascript:void(0);" class="addbutton">Add</a></td>
    </tr>
</tbody>

然后在你的jQuery中：

var maxrow = 10;
var addButton = $('.addbutton');
var wrapper = $('.thewrapper'); //Input field wrapper
var field = '<tr><td><input type="text" name="names" value="2" /></td><td><a href="javascript:void(0);" class="removebutton" >Remove</a></td></tr>';
var y = 1;
$(addButton).click(function() {
    if (y < maxrow) {
        y++;
        $(wrapper).append(field);  // notice that I switched back
    }
});

这将采用该变量field（现在以<tr>开头，而不是<div>），append来自<tbody>元件。

请注意，当您为event创建.removeButton时（我猜是要删除该行），您需要使用jQuery＆＃39; s {{1} } event，因为它是在on运行后创建的。

Answer 3

div不允许成为tbody的孩子

,aggfunc=[np.sum,len]

jquery追加div里面的div不会追加到最后

3 个答案: