5

我使用下面的代码来切换 td 颜色

    <html>
    <head>
       <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
       <script>
          $(function(){
             $("td").click(function(){
             $(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
             });
          });
       </script>
       <style>
          article, aside, figure, footer, header, hgroup, 
          menu, nav, section { display: block; }
          .on { background-color:red; color:#ffffff; }
       </style>
    </head>
    <body>

    <table class="mytable" border=1>
       <tbody>
       <tr>
          <td>Hello World</td>
          <td>Hello World1</td>
          <td>Hello World2</td>
       </tr>
       <tr>
          <td>Hello World</td>
          <td>Hello World1</td>
          <td>Hello World2</td>
       </tr>
       <tr>
          <td>Hello World</td>
          <td>Hello World1</td>
          <td>Hello World2</td>
       </tr>
       </tbody>
    </table>

    </body>
    </html>

上面的代码通过切换 td 颜色可以正常工作，请在此处查看演示

但现在我需要做三件事，

  1. 上面的代码适用于所有 tds，我需要它只适用于表类“mytable”的最后一列，
  2. 我需要添加一个按钮，单击该按钮应将所有 td 的颜色更改为表类“mytable”的“白色”
  3. 当我们选择特定的单元格时，完整的行应该是红色的。请帮我解决这个问题
4

6 回答 6

4

HTML

  <table class="mytable" border=1>
    <tbody>
      <tr>
        <td>Hello World</td>
        <td>Hello World1</td>
        <td>Hello World2</td>
      </tr>
      <tr>
        <td>Hello World</td>
        <td>Hello World1</td>
        <td>Hello World2</td>
      </tr>
      <tr>
        <td>Hello World</td>
        <td>Hello World1</td>
        <td>Hello World2</td>
      </tr>
    </tbody>
  </table>

<button id="change-color">Change Color</button>

​jQuery 

$(function() {
    $(".mytable tr td:last-child").click(function() {
        $(this).addClass("on").parent().siblings("tr").find("td.on").removeClass("on");
    })

    $('#change-color').click(function() {
        $('.mytable td.on').removeClass('on');
    });
});​

演示

根据评论

$(function() {
    $(".mytable tr td:last-child").click(function() {
        $('td.on').removeClass('on');
        $(this).parent().find('td').addClass("on");
    })

    $('#change-color').click(function() {
        $('.mytable td.on').removeClass('on');
    });
});​

演示

于 2012-09-10T08:27:05.843 回答
3

只需将您的 jQuery 选择器更改为td:last-child

      $(function(){
          $("td:last-child").click(function(){ //this is the changed part
    $(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
  });
});

http://jsfiddle.net/Kyle_Sevenoaks/hEvcZ/2/

对于第二个问题，您需要 HTML 和 jQuery：

HTML：

<button id="tableButton">White</button>

jQuery：

$("button#tableButton").click( function() {
    $("table.mytable *").css({"background":"#fff", "color":"#000"});
});

这是一种方法，您当然可以再次选择带有最后一个子选择器的 td，但是这段代码是一个很好的起点:)

http://jsfiddle.net/Kyle_Sevenoaks/hEvcZ/3/

于 2012-09-10T08:10:48.337 回答
1

HTML //将以下代码添加到html中

<input type="submit" value="submit" id="button">

JS代码

$(function(){
    $('td:last-child').click(function(){
  $(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
});
});

$('#button').on('click', function(){
   $('.mytable').find('td').css({'background':'#FFF', 'color':'#000'})
});
于 2012-09-10T08:21:38.037 回答
0

现在检查这个

 $(function(){
      $("tr:last-child td").click(function(){
          $("tr:last-child td").addClass("on");
  });
});
于 2012-09-10T09:34:22.950 回答
0

对于你的第二个问题

$("#Button_for_color").click( function() {
     $("table .mytable").css({"background":"black", "color":"white"});
});

首先我不确定，但它就像

$(function(){
      $("td:last-child").click(function(){
       //You can play here
 });

希望第二个也可以

于 2012-09-10T08:58:01.077 回答
0

对于你的第三个问题：

 $(function(){
   $("td").click(function(){
   $("td").removeClass("on");
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
  });
});
于 2012-09-10T09:05:15.783 回答