0

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <style type="text/css">
        .csstdhighlight
        {
            color: White;
            background-color: blue;
        }

        .csstdred
        {
            color: White;
            background-color: red;
        }

        .csstdgreen
        {
            color: White;
            background-color: green;
        }
  table.csstableappointment
        {
            border-collapse: collapse;
        }
        table.csstableappointment td
        {
            border: 1px solid #ccc;
        }
        table.csstableappointment .csstdred
        {
            border-color: #f00;
        }
        table.csstableappointment .csstdgreen
        {
            border-color: green;
        }

    </style>
 <body>


   <table id="tableAppointment" class="csstableappointment" cellspacing= bgcolor="#cccccc" border="1" width="50%">
     <tr class="csstextheader">
     <td>   
     </td>
     <td>Class  
     </td>
     <td>Numbers
     </td>
     </tr>
   <tr class="csstablelisttd">
     <td> 1  
     </td>
     <td class='csstdred'>john
     </td>
     <td>3
     </td>
     </tr>
      <tr class="csstablelisttd">
     <td>  4
     </td>
     <td class='csstdred' > 
     </td>
     <td class='csstdred'> mans 
     </td>
     </tr>   
      <tr class="csstablelisttd">
     <td >  7 
     </td>
     <td class='csstdred'> jack
     </td>
    <td class='csstdred'>   
     </td>
     </tr>  
      <tr class="csstablelisttd">
     <td> 10
     </td>
     <td>11
     </td>
    <td>12
    </td>
     </tr>
     <tr class="csstablelisttd">
     <td> 13
     </td>
     <td class='csstdred'>
     </td>
    <td>15
    </td>
     </tr>
      <tr class="csstablelisttd">
     <td> 16
     </td>
     <td class='csstdred'>george
     </td>
    <td>18
    </td>
     </tr>
   </table>

</body>
</html>


$(document).ready(function () {
    $(document).on('click', '#tableAppointment td', function (e) {
        if ($(this).hasclass('csstdred')) {
            $(this).removeclass('csstdred').addClass('csstdhighlight');
        }
    });
});

当我单击单元格时， 如果单元格长度为 3，则其前一个单元格和下一个单元格变为蓝色 ，如果单元格长度为 2，则只有其前一个单元格变为蓝色 ，如果单元格长度为 1，则当前单元格变为蓝色。

演示

4

1 回答 1

0 
<table border="1" id="tableAppointment">
<tr>
    <td>a</td>
    <td>asd</td>
    <td>asd3</td>
</tr>
</table>

使用这个想法来设置下一个和上一个。只需给它正确的类并相应地做你的 if 语句。

$(document).on('click','#tableAppointment td', function (){
     var length = $(this).text().length;
    var cellIndex = $(this).index();

    if(length == 3)
        $(this).closest('td').next().addClass('theClass');
    if(length == 1)
        $(this).closest('td').prev().addClass('class');
});

​</p>

于 2012-11-23T08:53:39.050 回答