根据类拆分表-Jquery

我一直在编写这个小脚本，它删除了表中一些不必要的行和列。每个

行span=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>

$（文档）.ready（函数（）{
var c1=$（“表tbody tr[rowspan='4']td”）；
var c2=$（“表tbody tr[rowspan='4']”）addClass（“标题”）；
风险值d1=$（c1）.最近的（“tr”）.下一个（“tr”）；
变量d2=$（“td:n个孩子（2），td:n个孩子（3），td:n个孩子（4）”；
var d3=$（“tr”）.find（“td[align='right']）.remove（）；
var newTable=$（c2）.nextUntil（c2）.addClass（“项目”）；
$（d1）.删除（）；
$（d2.remove（）；
$（d3.remove（）；
});
频道:A& ;；E
显示名称
剧集数
持续时间（分钟）
类型
动物园
1.
43.32
电视节目
囤积者
1.
43.32
电视节目
总数：
1.
43.32米
0.72小时
频道：成人游泳
显示名称
剧集数
持续时间（分钟）
类型
布拉克秀
3.
35.3
电视节目
别处安身
9
201.46
电视节目
杜拉拉！！
5.
113.89
电视节目
全金属炼金术士兄弟会
5.
113.24
电视节目
家庭电影
5.
114.68
电视节目
风险投资兄弟
10
229.05
电视节目
土卫六最大值
1.
23.16
电视节目
停止放送
5.
56.52
电视节目
Sealab 2021
3.
33.46
电视节目
划圈
2.
45.62
电视节目
黑色炸药
5.
113.89
电视节目
七武士
5.
111.23
电视节目
泰坦少年
7.
164.14
电视节目
天池木yo！GXP
5.
111.09
电视节目
总数：
70
1466.73米
24.45小时
频道：AMC
显示名称
剧集数
持续时间（分钟）
类型
行尸走肉
2.
10.86
电视节目
总数：
2.
10.86米
0.18小时

---

您可以使用数据集对元素进行分组。i、 e.

$（e）.for循环中的数据（'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);
}

。。。
var c2=$（“表tbody tr[rowspan='4']）。每个（函数（即，e）{
$（e）.addClass（“Header”）.data（'set'，i）；
});
...
var newTable=$（c2）.nextUntil（c2）.each（函数（i，e）{
var set=$（e）.prevUntil（'.Header'）.last（）.prev（）.data（'set'）；
$（e）.addClass（“项”）.data（“集”，集）；
});
...
$（“.Header”）.prev（）.remove（）；
var html=[]；
$（'#old tr'）。每个（函数（即，e）{
如果（！html[$（e）.data（'set'）]）html[$（e）.data（'set'））]=''；
html[$（e）.data（'set'）]+=$（e）[0]；
});
for（var i=0；i

演示：

---

注意：我在上面的演示中使用了outerHTML，这可能会导致某些浏览器出现一些错误。

您的问题是什么？对不起，我编辑了这个问题。此表在此示例中应该是3个单独的表。仍然不知道问题是什么。你想做什么（有点像这样）？它怎么不起作用？啊，我只是不知道从哪里开始。我是否需要存储表行并放入新表中？如何将表拆分为3个独立的实体。