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 に答える