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，这可能会在某些浏览器中引起一些错误。

根据类拆分表 - Jquery

1 个答案: