データタグを含む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(); 
     }); 

    }); 

});