如何在append()中使用jQuery each()方法

时间:2016-04-26 16:14:54

标签: jquery append each

我有一个向表中添加新行的函数。我还创建了一个函数,它使用类似的id获取文本输入的值。

我想要做的是将收集的值附加到表中,每列一个。最后一列将包含删除行链接。我无法弄清楚如何在append方法中进行迭代(可能是每个方法?)。这是我的代码。

添加行功能

$('.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();

2 个答案:

答案 0 :(得分: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);
});

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

答案 1 :(得分:0)

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

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