帶數據標籤並打印到表格的jQuery數組

Question

我有一個項目的無序列表，其值作爲數據標籤附加到每個列表項目。當用戶從列表中選擇一個項目時，數據標籤將作爲單獨的單元格打印到表格中，並將所有數據存儲到數組中。我能夠將每個項目附加到另一個列表，但我很難添加爲表格行。

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

然後添加到您的陣列中所有你需要做的是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(); 
     }); 

    }); 

});