【问题标题】:How to use jQuery each() method within an append()如何在 append() 中使用 jQuery each() 方法
【发布时间】:2016-08-20 14:30:48
【问题描述】:

我有一个向表格添加新行的函数。我还创建了一个函数来获取具有相似 id 的文本输入的值。

我想要做的是将收集到的值附加到表中,每列一个。最后一列将包含一个删除行链接。我不知道如何在 append 方法中进行迭代(也许是 each 方法?)。这是我的代码。

添加行函数

$('.addrow').click(function(){
    $('.datatable > tbody:last-child')
     .append($('<tr>')
        .append($('<td>')
            .append($('<a>')
                .attr('id', 'deleterow')
                .attr('href','#')
                .text('delete')
            )
        )
    );
});

删除行函数

$('.datatable').on('click', '.deleterow', function(){
    $(this).closest('tr').remove();
});

获取输入值函数

$("input[class='textinput']").map(function(){return $(this).val();}).get();

【问题讨论】:

  • 您不要将.each 放在.append 中,而是反过来。编写一个.each() 循环,主体将另一个&lt;td&gt; 附加到&lt;tr&gt;
  • 最后,将&lt;tr&gt; 附加到表格中。

标签: jquery append each


【解决方案1】:

代码结构应该是这样的:

$("#addrow").click(function() {
    var new_row = $("<tr>");
    $("input.textinput").each(function() {
        new_row.append($("<td>", {
            text: $(this).val();
        });
    });
    new_row.append($("<td>").append($("<a>", {
        "class": "deleterow",
        "href": "#",
        "text": "delete"
    });
    $(".datatable tbody").append(new_row);
});

循环遍历要用于填充表格列的数据,并在该循环中附加每个单元格。

【讨论】:

    【解决方案2】:

    你可以这样使用它。在这种情况下,对于具有类.copy 的“每个”元素,代码将在回调函数中运行。

    $(document).ready(function () {
        $( ".copy" ).each(function() {
          $("#target").append($(this).html());
        });
     });
    

    【讨论】:

    • 为了帮助其他人理解您的答案,请考虑包括对您的代码的简短描述以及它如何解决发布的问题
    猜你喜欢
    • 2012-01-20
    • 2011-07-02
    • 2011-09-06
    • 2016-08-09
    • 1970-01-01
    • 1970-01-01
    • 2013-06-03
    • 2018-07-07
    • 2017-11-25
    相关资源
    最近更新 更多