BlockUI in table - not working

Question

I am trying to use BlockUI in a table to block a single row when the user has already selected something. I can block all other elements on the page, except for everything that is in the table or the table itself. Does anyone else encounter this problem or offer any recommendations for resolving it?

Answer 1

According to this forum post :

Blocking table cells may work in some browsers, but will not work reliably in an x-browser environment. A locked item must be one that can have a relative position, and this is not true for TR and TD. In addition, the "block" add-on (div) is added to the locked element and adding a div to the table is not allowed. if you need to lock the table, wrap it in a div and lock the div instead. If you need to lock a table cell, wrap the contents of the cell in a div and block the div instead. If you need to block a row, block each TD content div.

Basically, you can embed the contents of td inside another div , which you can block, and then call block() for all these div 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 applied the row class to each td content so that I could call block() for these elements instead. The selector selects the first tr td div with the string class.

Here is a working example: http://jsfiddle.net/yWwR5/ (A large amount of code is just a BlockUI plugin).

You can follow this strategy (as indicated in the forum post) for any item that is part of the table.

Edit: If you cannot edit HTML for any reason, you can wrap the contents of each td in a div using JavaScript:

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

Answer 2

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

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

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

Bonus I really did this for the Knockout project, so I created a custom binding that can also handle table , TBODY and tr ...

http://jsfiddle.net/o4945uxv/