Question

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

我相信它是'append'的使用但是，li只是在表中添加，并且当前添加到数组的顺序，数据变得复杂。

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

感谢您的帮助。

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

根据您的问题，我假设您尝试将点击的列表项数据附加到表元素。目前，您将附加到列表项，然后将列表项追加到表中。如何在不使用list-item的情况下将表行附加到表上。

变化：

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

    });

});

带有数据标记的jQuery数组和打印到表

1 个答案: