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

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

我相信这是'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();
});

最佳答案

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

更改：

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

然后，要添加到数组中，只需在代码的同一位置push对该数组添加另一个索引：

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

    });

});