0

テーブルをフィルタリングするために使用する要素の1つに入力ボックスがあるテーブルがあります。

ボックスに何かを書くと、テーブルがフィルタリングされます。

奇妙なことは、display:block を使用して表示したい行を表示すると、行の外観が完全に破壊されることです。しかし、jquery .toggle(); を使用すると それは正常に動作します。

何故ですか？

HTML:

<body>
    <table>
        <tr><th>Users<input type="text" id="filter"/></th></tr>
        <tr class="user" data="patrick"><td>Patrick</td></tr>
        <tr class="user" data="john"><td>John</td></tr>
    </table>
</body>

機能する SCRIPT をフィルター処理する

$('#filter').keyup(function(){
    $(".user").css("display", "none");
    if($("#filter").val()!=''){             
        var filterstr = $("#filter").val().toLowerCase();
        $("[data*="+filterstr+"].user").toggle();
    }else{
        $(".user").toggle();
    }
});

display:block を使用する場合

ディスプレイ付き：ブロック

CSS:

table
{
   width: 200px;
}
td
{
   border: 1px solid #000;
   font: bold 10px Helvetica, Arial, sans-serif;
   padding: 5px;
}
th
{
   background: #f3f3f3;
   border: 1px solid #000;
   font: bold 10px Helvetica, Arial, sans-serif;
   padding: 5px;
}
4

4 に答える 4

2

表の行はデフォルトでdisplay:table-rowはないため、代わりに使用してください。display:block

于 2013-05-03T12:29:05.713 に答える
1

これは、テーブルのデフォルトの表示タイプがdisplay: blockではなく であるためですdisplay: table。各テーブル本体、行、セルなどには、独自の表示タイプもあります。toggle()JQuery のメソッドは、切り替えている要素に応じて適切な表示タイプを設定すると思います。

于 2013-05-03T12:26:02.117 に答える
0

要素に設定display:blockすると、その表示タイプが に設定されblockます。

ただし、デフォルトの表示タイプが異なり、 ではうまく機能しないテーブル要素でこれを実行しようとしていますblock。

これらの要素の表示タイプを設定する必要がある場合は、設定する要素に応じてdisplay:table、display:table-rowまたはに設定する必要があります。display:table-cell

または、次のようにデフォルト値に戻すこともできます。

$('myTableCell').css('display':'');

jQuery コードでプロパティを空の文字列に設定するdisplayと、インライン スタイルが削除されるため、通常の CSS が引き継がれるか、要素に CSS を指定していない場合はブラウザーのデフォルトになります。

于 2013-05-03T12:32:21.183 に答える
0

CSSを見ないとわかりにくいですが、「display:block;」が原因かもしれません。入力に境界線を追加しますが、トグルは追加しません。境界線を削除するか、セルを広げるとうまくいく可能性があります。

于 2013-05-03T12:28:43.510 に答える