根据类拆分表 - jquery

Question

我一直在研究这个小的脚本，它可以删除表上的一些不必要的行和列。每个rowspan=4是以下行的标题。

我不确定如何从每个rowspan标记下的内容（保留标题）创建单独的表。下面的例子/ jsfiddle将会是3个独立的表格。这将是动态的，因为行数量差异很大，但列不会。让我知道你是否需要更多信息。

让我知道如果我不清楚。我在这方面遇到了困难，所以任何援助都会非常有帮助。

$(document).ready(function() { 
    var c1 = $("table tbody tr[rowspan='4'] td");  
    var c2 = $("table tbody tr[rowspan='4']").addClass("Header"); 
    var d1 = $(c1).closest("tr").next("tr"); 
    var d2 = $("td:nth-child(2),td:nth-child(3),td:nth-child(4)"); 
    var d3 = $("tr").find("td[align='right']").remove(); 
    var newTable = $(c2).nextUntil(c2).addClass("item"); 

    $(d1).remove(); 
    $(d2).remove(); 
    $(d3).remove(); 

    }); 

    <table> 

    <tr rowspan="4"> 
    <td><b>Channel: A&amp;E</b></td> 
</tr> 
    <tr> 
    <td>Show Name</td> 
    <td>Number of Episodes</td> 
    <td>Duration (min)</td> 
    <td>Type</td> 
</tr> 
<tr> 
     <td>Zoo</td> 
     <td>1</td> 
     <td>43.32</td> 
     <td>TV Show</td> 
    </tr> 

    <tr> 
     <td>Hoarders</td> 
     <td>1</td> 
     <td>43.32</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td align="right"><b>Total:</b></td> 
     <td><b>1</b></td> 
     <td colspan="2"><b>43.32 m<br>0.72 h</b></td> 
    </tr> 
    <tr rowspan="4"> 
     <td><b>Channel: Adult Swim</b></td> 
    </tr> 
    <tr> 
     <td>Show Name</td> 
     <td>Number of Episodes</td> 
     <td>Duration (min)</td> 
     <td>Type</td> 
    </tr> 
    <tr> 
     <td>The Brak Show</td> 
     <td>3</td> 
     <td>35.3</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Delocated</td> 
     <td>9</td> 
     <td>201.46</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Durarara!!</td> 
     <td>5</td> 
     <td>113.89</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Fullmetal Alchemist Brotherhood</td> 
     <td>5</td> 
     <td>113.24</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Home Movies</td> 
     <td>5</td> 
     <td>114.68</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>The Venture Bros</td> 
     <td>10</td> 
     <td>229.05</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Titan Maximum</td> 
     <td>1</td> 
     <td>23.16</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Off the Air</td> 
     <td>5</td> 
     <td>56.52</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Sealab 2021</td> 
     <td>3</td> 
     <td>33.46</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Stroker and Hoop</td> 
     <td>2</td> 
     <td>45.62</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Black Dynamite</td> 
     <td>5</td> 
     <td>113.89</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Samurai 7</td> 
     <td>5</td> 
     <td>111.23</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Sym-Bionic Titan</td> 
     <td>7</td> 
     <td>164.14</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td>Tenchi Muyo! GXP</td> 
     <td>5</td> 
     <td>111.09</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td align="right"><b>Total:</b></td> 
     <td><b>70</b></td> 
     <td colspan="2"><b>1466.73 m<br>24.45 h</b></td> 
    </tr> 
    <tr rowspan="4"> 
     <td><b>Channel: AMC</b></td> 
    </tr> 
    <tr> 
     <td>Show Name</td> 
     <td>Number of Episodes</td> 
     <td>Duration (min)</td> 
     <td>Type</td> 
    </tr> 
    <tr> 
     <td>The Walking Dead</td> 
     <td>2</td> 
     <td>10.86</td> 
     <td>TV Show</td> 
    </tr> 
    <tr> 
     <td align="right"><b>Total:</b></td> 
     <td><b>2</b></td> 
     <td colspan="2"><b>10.86 m<br>0.18 h</b></td> 
    </tr> 

http://jsfiddle.net/arkjoseph/DRCrg/2/

Answer 1

您可以使用数据集族元素。即for循环中的$(e).data('set', i)。

然后循环遍历所有tr并使用'set'数据密钥对其进行过滤。

最后将它们格式化成表格。

... 
var c2 = $("table tbody tr[rowspan='4']").each(function (i, e) { 
    $(e).addClass("Header").data('set', i); 
}); 
... 
var newTable = $(c2).nextUntil(c2).each(function (i, e) { 
    var set = $(e).prevUntil('.Header').last().prev().data('set'); 
    $(e).addClass("item").data('set', set); 
}); 
... 
$(".Header").prev().remove(); 
var html = []; 
$('#old tr').each(function (i, e) { 
    if (!html[$(e).data('set')]) html[$(e).data('set')] = ''; 
    html[$(e).data('set')] += $(e)[0].outerHTML; 
}); 
for (var i = 0; i < html.length; i++) { 
    var result = '<br><table><tbody>' + html[i] + '</tbody></table>'; 
    $('body').append(result); 
} 

演示：http://jsfiddle.net/indream/DRCrg/3/

注：我用outerHTML在上面演示中，这可能会导致一些bug在某些浏览器。