javascript - 带有数据标签的 jQuery 数组并打印到表

Question

我有一个无序列表的项目，其中的值作为数据标记附加到每个列表项。当用户从列表中选择一个项目时，li 会消失，数据标签将作为单独的单元格打印到表格中，并且所有数据都存储到一个数组中。我能够将每个项目附加到另一个列表，但我很难将其添加为表格行。

我相信这是使用“append”，但是，li 只是添加到表中，并且按照添加到数组的当前顺序，数据会复合。

我觉得订单需要点击>添加到数组>然后打印到表格。

Here is a link to my most recent.

感谢您提前提供的帮助。

var myArraySelected = [] ;

$(function() {

var myFunc = function() {
    myArraySelected = [] ;
    var userList = $('#selected');
    userList.children('li').each(function() {
        var userID = $(this).attr('data-user');
        var userService = $(this).attr('data-role');
        var userCategory = $(this).attr('data-category');
        var userName = $(this).attr('data-name');
        myArraySelected.push({
            'id':userID,
            'name':userName,
            'role':userService,
            'category' :userCategory
        });

    });
};

$('#userList li').click(function() {
    $(this).fadeOut('slow', function() { // code to run after the fadeOut
        $(this).append('<tr><td><p>'+ $(this).attr('data-name') + '<br>' + $(this).attr('data-user') + '<br>' + $(this).attr('data-role') + '<br>' + $(this).attr('data-category') + '</p></td></tr>')
        $(this).appendTo('#selected').fadeIn('slow');
        myFunc();
    });

});
myFunc();
});

Answer 1

根据您的问题，我假设您正在尝试将单击的列表项的数据附加到表元素中。当前，您正在附加到列表项，然后将列表项附加到表中。只将表行附加到表中而不使用列表项怎么样？

更改:

    $(this).append('<tr><td><p>'+ $(this).attr('data-name') + '<br>' + $(this).attr('data-user') + '<br>' + $(this).attr('data-role') + '<br>' + $(this).attr('data-category') + '</p></td></tr>')
    $(this).appendTo('#selected').fadeIn('slow');

致:

    $('#selected').append('<tr><td><p>'+ $(this).attr('data-name') + '<br>' + $(this).attr('data-user') + '<br>' + $(this).attr('data-role') + '<br>' + $(this).attr('data-category') + '</p></td></tr>').find('tr:last').fadeIn();

然后，要添加到数组中，您需要做的就是在代码中的同一位置将另一个索引推送到数组中:

$('#userList li').click(function() {

    //cache the `$(this)` selector since it will be used more than once
    var $this = $(this);
    $this.fadeOut('slow', function() { // code to run after the fadeOut

        //append a row onto the `#selected` table using the clicked list-item's data-attributes as data; notice after the append I select the newly appended table row and fade it in (which assumes that it's CSS is making it hidden at first)
        $('#selected').append('<tr><td><p>'+ $this.attr('data-name') + '<br>' + $this.attr('data-user') + '<br>' + $this.attr('data-role') + '<br>' + $this.attr('data-category') + '</p></td></tr>').find('tr:last').fadeIn();

        //now push a new index onto the `MyArraySelceted` array using the data-attributes for the clicked list-item as data
        myArraySelected.push({
            'id'       : $this.attr('data-user'),
            'name'     : $this.attr('data-name'),
            'role'     : $this.attr('data-role'),
            'category' : $this.attr('data-category')
        });

        //now remove the list-item from the UL element
        $this.fadeOut(function () {
            $this.remove();
        });

    });

});