BlockUI в таблице - не работает - PullRequest
Новая
       33

BlockUI в таблице - не работает

4 голосов
/ 13 января 2011

Я "пытаюсь" использовать BlockUI в таблице, чтобы заблокировать одну строку, когда пользователь уже что-то выбрал.Я могу заблокировать все другие элементы на странице, кроме чего-либо в таблице или самой таблице.Кто-нибудь еще сталкивался с этой проблемой или есть какие-либо предложения о том, как решить?

Ответы [ 2 ]

9 голосов
/ 18 января 2011

Согласно этому сообщению на форуме :

Блокировка ячеек таблицы может работать в некоторых браузерах, но не может надежно работать в среде x-браузера.Блокированный элемент должен быть элементом, который может иметь относительную позицию, а это не относится к TR и TD.Кроме того, наложение «блок» (div) добавляется к заблокированному элементу, и добавление div в таблицу недопустимо.Если вам нужно заблокировать таблицу, поместите ее в div и заблокируйте этот div.Если вам нужно заблокировать ячейку таблицы, поместите содержимое ячейки в div и вместо этого заблокируйте этот div.Если вам нужно заблокировать строку, заблокировать div каждого контента TD.

По сути, вы можете встроить контент td в другой div, который можно заблокировать, а затем вызвать block() на всех этих div с вместо:

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 с td с div с классом "строка".

Вот рабочий пример: http://jsfiddle.net/yWwR5/ (Большой объем кода впереди простоплагин BlockUI).

Вы можете следовать этой стратегии (как описано в сообщении на форуме) для любого элемента, который является частью таблицы.

Изменить: Если вы можетеНе редактируйте HTML по некоторым причинам, вы можете обернуть содержимое каждого td в div с помощью JavaScript: 

$("tr td").contents().wrap("<div class='row' />");
0 голосов
/ 04 сентября 2015

Это своего рода расширение @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/

...