4

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

4

2 回答 2

9

根据这个论坛帖子：

阻止表格单元格可能在某些浏览器中有效，但在 x 浏览器环境中无法可靠地工作。被阻塞的元素需要是一个可以具有相对位置的元素，TRs 和 TDs 不是这样。此外，“块”覆盖（一个 div）被附加到被阻止的元素，并且将 div 附加到表是无效的。如果您需要阻止表格，请将其包装在 div 中并改为阻止该 div。如果您需要阻止表格单元格，请将单元格内容包装在 div 中并改为阻止该 div。如果需要屏蔽一行，屏蔽每个TD的内容div。

基本上，您可以将td' 的内容嵌入到另一个 ' 中div，这可以被阻止，然后调用block()所有这些 divs：

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()这些元素。选择器选择第一个具有“行”类tr的 s tds 。div

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

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

编辑：如果由于某种原因您无法编辑 HTML，您可以将每个内容的内容都包含td在divJavaScript 中：

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

这是@Andrew Whitaker 的一种扩展。我想阻止一个TBODY并显示一条消息，所以做了这样的事情......

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

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

奖励：我实际上是在为一个 Knockout 项目做这个，所以我制作了一个自定义绑定，它也可以处理table,tbody和tr...

http://jsfiddle.net/o4945uxv/

于 2015-09-03T21:59:48.097 回答