Question

I have an unordered list of items with values appended as Data tags to each of the list items. When the user selects an item from the list, the li fades, the Data tags are printed into a table as separate cells, and all data is stored into an array. I was able to append each item to another list, but I am having difficult adding as a table row.

I believe it is the use of ‘append’ but, the li just gets added within table and with the current order of adding to the array, the data gets compounded.

I feel that the order needs to be click > add to array > then print to table.

Here is a link to my most recent.

Thank you for your assistance in advance.

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

From your question I am assuming that you are trying to append the clicked list-item’s data to a table element. Currently you are appending to the list-item and then appending the list item to a table. How about just appending the table row onto the table without using the list-item.

Change:

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

To:

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

And then to add to your array all you need to do is push another index onto the array right in the same place in your code:

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

    });

});