[SOLVED] BlockUI in a Table

BlockUI in a Table - Not Working

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?

Solution

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' />");