Question

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

Answer 1

阻止表格单元格可能在某些浏览器中有效，但不起作用在x-browser环境中可靠地运行。被阻止的元素需要一个可以具有相对位置的元素，但这不是真的 TR和TD。此外，“块”覆盖（div）被附加到阻止元素，并将div附加到表无效。如果你需要阻塞一个表，将其包装在div中并阻止该div。如果您需要阻止表格单元格，请将单元格内容包装在div中阻止那个div代替。如果你需要阻止一行，阻止每个TD 内容div。

基本上，您可以将td的内容嵌入到另一个div中，然后阻止该内容，然后在所有那些 {{block()上调用div 1}}代替：

<强> 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 td s div，其中包含“row”类。

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

您可以按照此策略（如论坛帖子中所述）查看表格中的任何元素。

修改：如果由于某种原因无法编辑HTML，则可以使用JavaScript将td中的每个div的内容包装起来：

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

Answer 2

这是@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/

表中的BlockUI - 不起作用

2 个答案: