jQuery 속성을 기반으로 중첩 테이블을 만들었습니다.

Question

어제 중첩 목록과 중첩 테이블을 만드는 데 모두 답변을 사용할 수있을 것이라고 생각한 비슷한 질문에 대해 어제 물었습니다. 그러나 중첩 테이블을 생성하기 위해 jQuery를 수정하려고하면 약간의 혼란이 따른다. 그것은 둥지가되지 않거나 자식 <tr>의 부모 대신 <tr>의 하위에있는 자식 <tr>의 테이블 전체를 중첩하지 않습니다. 샘플 테이블 :

<table> 
    <tbody> 
     <tr id="10"><td>Parent 1</td></tr> 
     <tr id="14"><td>Parent 2</td></tr> 
    </tbody> 
</table> 

<table> 
    <tbody> 
     <tr class="10"><td>Child A</td></tr> 
     <tr class="10"><td>Child B</td></tr> 
     <tr Class="14"><td>Child X</td></tr> 
    </tbody> 
</table> 

JQuery와는 다음과 같습니다 (이 jQuery를 아주 기꺼이 나를 도와 vzwick 코드를 기반으로) :

$('tbody.csTR_children tr').each(function() { 
     probable_parent = $('tbody.csTR_parent tr#' + $(this).attr('class')); 
     if (probable_parent.length) { 
      if (!probable_parent.find('tbody').length) probable_parent.append('<tbody/>'); 
     $(this).detach().appendTo(probable_parent.find('tbody')); 
    } 
}); 

이것은 내가 얻을 가장 가까운이며 전체 테이블을 둥지 위에서 말했듯이 각 부모 행 아래에 (IE에서는 첫 번째 부모와 자식을 올바르게 중첩하지만 나머지는 중첩하지 않습니다.) 어떤 제안?

Answer 1

$('tbody.csTR_children tr').each(function() { 
    probable_parent = $('#' + $(this).data('parentID')); 
    if (probable_parent.length) { 
     if (!probable_parent.find('tbody').length) 
     $(this).detach().insertAfter(probable_parent); 
    } 
}); 

Answer 2

이것 좀보세요. 당신이 연주하는

여기

$('table#child tr').each(function() { 
    var parentId = $(this).data('parentId'); 
    var parent = $('#' + parentId); 
    if (parent) { 
     var tbody = $('tbody', parent); 
     if (tbody.length == 0) { 
      // need to add the table wrapper 
      tbody = $('<tbody>'); 
      var table = $('<table>').append(tbody); 
      parent.append(table); 
     } 
     $(this).detach().appendTo(tbody); 
    } 
}); 

가 jsFiddle이다 : 나는 당신이 원하는 것을 생각 http://jsfiddle.net/78aXx/2/

밥

Answer 3

당신은 그냥 완전히 잘못 이는 tr에 tbody를 추가하려고 . tbody이 table에서 직접해야하고 tr 직접 그 테이블을 넣어 수 없습니다, 그것은, 그래서 기본적으로 td

http://jsfiddle.net/ZDUQU/

될 행의 첫 번째 td에 테이블을 추가 할 수있다 :

probable_parent.children(":first").append('<table><tbody></tbody></table>');