如何使用 js/css 禁用特定类的 </td> 选择？

Question

我的日历是用 html 表构建的，其中很少有日期可以选择。所以我需要禁用所有其他数据。

突出显示 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');
  }

});

现在假设我的表如下所示：

<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>

那么现在如何禁用 tr，使用 js/css 无法选择 calss？

Answer 1

首先，你必须通过添加验证您的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>

我不确定禁用 tr 是什么意思，因为该disable属性仅适用于<input>标记。

您可以添加unselectable例如调用的类并添加要用于“禁用 tr”的 css，请查看下面的示例：

.unselectable{
     background-color: #ddd;
     cursor: not-allowed;
}

希望这可以帮助。

<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>

.unselectable{
     background-color: #ddd;
     cursor: not-allowed;
}