4

私は、ユーザーがすでに何かを選択したときに1つの行をブロックするために、テーブルでBlockUIを使用しようとしています。テーブル内のものまたはテーブル自体を除いて、ページ上の他のすべての要素をブロックすることができます。他の誰かがこの問題に遭遇したか、解決する方法について何か提案がありますか？

4

2 に答える 2

9

このフォーラムの投稿によると：

テーブルセルのブロックは一部のブラウザでは機能する場合がありますが、xブラウザ環境では確実に機能しません。ブロックされた要素は、相対的な位置を持つことができる要素である必要がありますが、これはTRおよびTDには当てはまりません。さらに、「ブロック」オーバーレイ（div）がブロックされた要素に追加され、テーブルへのdivの追加は無効です。テーブルをブロックする必要がある場合は、テーブルをdivでラップし、代わりにそのdivをブロックします。テーブルセルをブロックする必要がある場合は、セルの内容をdivでラップし、代わりにそのdivをブロックします。行をブロックする必要がある場合は、各TDのコンテンツdivをブロックします。

td基本的に、コンテンツを別のコンテンツに埋め込むことができますdiv。これをブロックして、代わりにそれらblock()すべてを呼び出すことができます。 div

HTML：

<table>
    <tr>
        <td><div class="row">Row 1 Col 1</div></td>
        <td><div class="row">Row 1 Col 2</div></td>
    </tr>
    <tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td></tr>
    <tr><td>Row 3 Col 1</td><td>Row 3 Col 2</td></tr>
</table>

JavaScript：

$("tr:eq(0) td > div.row").block({
    message: null
});

rowそれぞれtdのコンテンツにクラスを適用して、block()代わりにそれらの要素を呼び出すことができるようにしました。セレクターは、クラス「行」を持つ最初のstrを選択します。tddiv

実用的な例を次に示します。http： //jsfiddle.net/yWwR5/（大量のコードはBlockUIプラグインにすぎません）。

表の一部である任意の要素について、この戦略（フォーラムの投稿で概説されている）に従うことができます。

編集：何らかの理由でHTMLを編集できない場合は、それぞれのコンテンツをJavaScriptでラップできtdますdiv。

$("tr td").contents().wrap("<div class='row' />");
于 2011-01-18T17:50:33.660 に答える
0

これは@AndrewWhitakerの拡張の一種です。ブロックしてメッセージを表示したかったTBODYので、このようなことをしました...

$("tbody").find("td:first").block();
$("tbody").find("td:not(:first)").block({message: null});

http://jsfiddle.net/g49xofgh/3/

ボーナス：私は実際にノックアウトプロジェクトでこれを行っていたので、、、、および...も処理できるカスタムバインディングを作成しtableましtbodyたtr。

http://jsfiddle.net/o4945uxv/

于 2015-09-03T21:59:48.097 に答える