0

我一直在研究这个小脚本，它删除了表格上一些不必要的行和列。每个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/

4

1 回答 1

1

您可以使用数据集对元素进行分组。即$(e).data('set', i)在for循环中。

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

于 2013-03-01T01:36:14.837 回答