jquery - 表中的 BlockUI - 不工作

Question

我“尝试”在表中使用 BlockUI，以便在用户已经选择某些内容时屏蔽一行。我可以屏蔽页面上除表格或表格本身中的任何内容之外的所有其他元素。有其他人遇到过这个问题或对如何解决有任何建议吗？

Answer 1

根据this forum post :

Blocking table cells may work in some browsers but in won't work reliably in an x-browser environment. The blocked element needs to be an element that can have a relative position, and that is not true of TRs and TDs. Further, the "block" overlay (a div) is appended to the blocked element, and appending a div to a table is not valid. If you need to block a table, wrap it in a div and block that div instead. If you need to block a table cell, wrap the cell contents in a div and block that div instead. If you need to block a row, block each TD's content 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()。选择器选择第一个带有“row”类的trs tds divs。

这是一个工作示例:http://jsfiddle.net/yWwR5/ (前面的大量代码只是BlockUI插件)。

对于表格中的任何元素，您都可以遵循此策略(如论坛帖子中所述)。

编辑:如果由于某种原因无法编辑 HTML，您可以将每个 td 的内容包装在 div 中JavaScript:

$("tr td").contents().wrap("<div class='row' />");