BlockUI - blocking TBODY
HTML
<script src="//cdn.jsdelivr.net/knockout/3.3.0/knockout.js"></script>
<script src="//cdn.jsdelivr.net/jquery.blockui/2.70.0/jquery.blockUI.min.js"></script>
<button>toggle block</button>
<br>
<br>
<table border=1>
<tbody>
<tr>
<td>don't block me</td>
<td>don't block me</td>
<td>don't block me</td>
</tr>
<tr>
<td>don't block me</td>
<td>don't block me</td>
<td>don't block me</td>
</tr>
<tr>
<td>don't block me</td>
<td>don't block me</td>
<td>don't block me</td>
</tr>
</tbody>
<tbody class="blockMe">
<tr>
<td>block me</td>
<td>block me</td>
<td>block me</td>
</tr>
<tr>
<td>block me</td>
<td>block me</td>
<td>block me</td>
</tr>
<tr>
<td>block me</td>
<td>block me</td>
<td>block me</td>
</tr>
</tbody>
<tbody>
<tr>
<td>don't block me</td>
<td>don't block me</td>
<td>don't block me</td>
</tr>
<tr>
<td>don't block me</td>
<td>don't block me</td>
<td>don't block me</td>
</tr>
<tr>
<td>don't block me</td>
<td>don't block me</td>
<td>don't block me</td>
</tr>
</tbody>
</table>
CSS
div {
border: 1px solid gray;
padding: .5em;
}
JavaScript
var isBlocked = false;
function toggleBlock(element) {
debugger;
if(isBlocked){
$(element).find("td:first").unblock();
$(element).find("td:not(:first)").unblock();
}
else{
var options = {message: "Blocked!", css: { padding: 0, margin: 0, top: '1px', left: '1px', width: '80%', textAlign: 'left', color: '#000', border: '2px solid #aaa', backgroundColor: '#fff', cursor: 'wait' }};
//here's the beef
$(element).find("td:first").block(options);
$(element).find("td:not(:first)").block({message: null});
//end beef
}
isBlocked = !isBlocked;
}
$("button").click(function(){
toggleBlock($(".blockMe"));
});