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 に答える