如何禁用</td>选择与js/css的特定类? [英] How to disable </td> selection with specific class with js/css?

问题描述

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

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.

突出显示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>

那么现在如何使用js/css通过不可选择的cal禁用tr?

So now how to disable the tr, with unselectable calss using js/css?

推荐答案

首先，您必须通过在<tr>内添加<td>标记来验证HTML代码，而不是直接将文本添加到行中并添加<tr>内的>标签:

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

<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>标签.

I'm not sure what you mean by disable tr since the disable attribute work just for <input> tag.

例如，您可以添加名为unselectable的类，并添加要用于"disabled tr"的css，请参见以下示例:

You could add class called unselectable for example and add the css you want to use for "disabled tr", check example bellow :

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

希望这会有所帮助.

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

这篇关于如何禁用&lt;/td&gt;选择与js/css的特定类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！