데이터 태그가있는 jQuery 배열과 테이블에 인쇄

Question

각 목록 항목에 데이터 태그로 값이 추가 된 정렬되지 않은 항목 목록이 있습니다. 사용자가 목록에서 항목을 선택하면 li가 사라지고 데이터 태그가 별도의 셀로 표에 인쇄되고 모든 데이터가 배열로 저장됩니다. 각 항목을 다른 목록에 추가 할 수 있었지만 표 행으로 추가하기가 어려웠습니다.

나는 그것이 '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(); 
     }); 

    }); 

});