Javascript 如何使用 js/css 禁用特定类的 </td> 选择？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35553568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable </td> selection with specific class with js/css?
提问by Ravikumar Chunduri
I have my Calendar constructed with html table, where few of the dates can only be selectable. So i need to disable all the other data.
我的日历是用 html 表构建的，其中很少有日期可以选择。所以我需要禁用所有其他数据。
Function that highlights the td :
突出显示 td 的功能：
/* Get all rows from your 'table' but not the first one
* that includes headers. */
var rows = $('td').not(':first');
/* Create 'click' event handler for rows */
rows.on('click', function (e) {
/* Get current row */
var row = $(this);
/* Check if 'Ctrl', 'cmd' or 'Shift' keyboard key was pressed
* 'Ctrl' => is represented by 'e.ctrlKey' or 'e.metaKey'
* 'Shift' => is represented by 'e.shiftKey' */
if ((e.ctrlKey || e.metaKey) || e.shiftKey) {
/* If pressed highlight the other row that was clicked */
row.addClass('highlight');
} else {
/* Otherwise just highlight one row and clean others */
rows.removeClass('highlight');
row.addClass('highlight');
}
});
Now suppose my table looks like below :
现在假设我的表格如下所示：
<table>
<th class='weekday'>Mon</th><th class='weekday'>Tue</th><th class='weekday'>Wed</th>
<tr class='selectable'> 1</tr>
<tr class='selectable'> 2</tr>
<tr class='unselectable'> 3</tr>
</table>
So now how to disable the tr, with unselectable calss using js/css?
那么现在如何禁用 tr，使用 js/css 无法选择 calss？
回答by Zakaria Acharki
First you have to validate your HTML code by adding <td>tags inside the <tr>instead of adding the text directly to the row and adding the <th>tags inside the <tr>:
首先，你必须通过添加验证您的HTML代码<td>标签内<tr>，而不是直接将文本行并添加<th>里面的标签<tr>：
<table>
<tr>
<th class='weekday'>Mon</th>
<th class='weekday'>Tue</th>
<th class='weekday'>Wed</th>
</tr>
<tr class='selectable'>
<td>1</td>
</tr>
<tr class='selectable'>
<td>2</td>
</tr>
<tr class='unselectable'>
<td>3</td>
</tr>
</table>
I'm not sure what you mean by disable tr since the disableattribute work just for <input>tag.
我不确定禁用 tr 是什么意思，因为该disable属性仅适用于<input>标记。
You could add class called unselectablefor example and add the css you want to use for "disabled tr", check example bellow :
您可以添加unselectable例如调用的类并添加要用于“禁用 tr”的 css，请查看下面的示例：
.unselectable{
background-color: #ddd;
cursor: not-allowed;
}
Hope this helps.
希望这可以帮助。
.unselectable{
background-color: #ddd;
cursor: not-allowed;
}<table border='1'>
<tr>
<th class='weekday'>Mon</th>
<th class='weekday'>Tue</th>
<th class='weekday'>Wed</th>
</tr>
<tr class='selectable'>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class='selectable'>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class='unselectable'>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>回答by Alexis
Just change your selection on your event
只需更改您对活动的选择
var rows = $('td .selectable');
回答by Alexis
$('.unselectable').prop("disabled",true)
This will disable the <tr>elements with class unselectable.
这将禁用<tr>带有 class的元素unselectable。
回答by Vinothkumar
var rows = $('tr .selectable').not(':first');
use the above line to get rows with class name 'selectable'. Also add <td>tags inside your <tr> </tr>row tags to add contents.
使用上面的行来获取类名为“selectable”的行。此外，添加<td>您的标签内<tr> </tr>的行代码添加内容。
