BlockUI in a Table - Not Working

Question

I am "trying" to use BlockUI in a table to have one row blocked out when a user already selected something. I am able to block out all other elements on the page except anything in the table or the table itself. Has anyone else run into this issue or have any suggestions on how to solve?

Answer 1

According to 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.

Basically, you could embed your td's content inside another div, which can be blocked and then call block() on all of those divs instead:

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
});

I've applied a class row to each td's content so that I can call block() on those elements instead. The selector selects the first trs tds divs with class "row."

Here's a working example: http://jsfiddle.net/yWwR5/ (The large amount of code up front is just the BlockUI plugin).

You could follow this strategy (as outlined in the forum post) for any element that's part of the table.

Edit: If you can't edit the HTML for some reason, you could wrap the contents of each td in the div with JavaScript:

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

Answer 2

This is kind-of an extension of @Andrew Whitaker. I wanted to block a TBODY and show a message so did something like this...

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

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

Bonus: I was actually doing this for a Knockout project, so I made a custom binding that could also handle table, tbody, and tr...

http://jsfiddle.net/o4945uxv/