1

ただし、これと同様の構造の HTML テーブルがあります。

  • 行スパンは固定サイズではありません
  • 特定のテーブルに複数の行スパンが存在する場合があります (それぞれの長さが異なる場合があります)。
  • テーブルが生成されます

JSFiddle

<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td>
                <label for="searchbox">Search:</label>
                <input type="text" id="filter1" />
            </td>
        </tr>

    </tbody>
</table>
<table id="foo" border="1px">
    <tr> 
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
    </tr>
    <tbody id="data">
    <tr>
        <td class="col1" rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr> 
     <tr>
        <td class="col1">v</td>
        <td>w</td>
        <td>x</td>
        <td>y</td>
        <td>z</td>
    </tr>
</table>

検索は最初の列を使用して行われます。以下で説明するこの検索/フィルター機能を使用すると、rowspan で問題が発生します。

<script language="javascript" type="text/javascript">
    $(function() {    
     $('#filter1').change(function() { 
     $("#foo td.col1:contains('" + $(this).val() + "')").parent().show();
     $("#foo td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
     }); 
  });
</script>

問題は、 '1'からすべての行を非表示にする検索語を入力する場合( 'v' の検索など) です。rowspan の最初の行のみが非表示になり、rowspan の後続の行部分はすべて残ります。したがって、行 [6,7,8,9] は常に残ります。

表の例:

[1 - 2,3,4,5]
[  - 6,7,8,9]
[v - w,x,y,z]

' 1 ' を検索中(正しい):

[1 - 2,3,4,5]
[  - 6,7,8,9]

' v ' の検索(不正解):

[  - 6,7,8,9]  <- this row should not be returned 
[v - w,x,y,z]

これらのサブ行スパンを適切に非表示にするにはどうすればよいですか?

更新: 解決策は、行スパン数に応じて異なるクラスを追加し、適切な数の .parent().next(i).hide() でこれらのクラスを異なる方法で処理する関数を用意することだと思います-私はそうではありませんこれを行う方法と、このアプローチが正しいかどうかを確認してください。

4

1 に答える 1

3

Rowspanedは、それらが属しているように見えるtdすべての要素の子ではありません。trDOM ツリーのすべての要素には、直接の親が 1 つしかない場合があります。この場合、それtrは HTML に表示される直接の親です。

それを念頭に置いて、divs などでデザインを作成することをお勧めします。これにより、そのような操作をより自然に行うことができます。

とにかく、HTML を変更することなく、行インデックスとそのrowspan属性を使用していくつかの補正を行うことができます。それが有用かどうかを確認してください。

$(function() {
    $('#filter1').change(function() {
        var toShow = $("#data td.col1:contains('" + $(this).val() + "')");
        $("#data tr").not( $('#data tr').has(toShow) ).hide();
        toShow.each(function() {
            var rspan = $(this).attr('rowspan'),
                father = $(this).parent();
            if (rspan && +rspan > 1) {
                father.nextUntil(':nth-child(' + (father.index() + (+rspan) + 1) + ')').andSelf().show();
            } else father.show();
        });
    });
});

フィドル

于 2012-11-13T17:02:11.287 に答える