改变所有<td>为特定的桌子点击颜色

changing all <td> color onclick for a particular table

本文关键字：颜色 lt td 改变 gt      更新时间：2023-09-26

iam使用以下代码切换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. 上面的代码适用于所有的td，我只需要它适用于表类"mytable"的最后一列
  2. 我需要添加一个按钮，当单击该按钮时，应将表类"mytable"的所有td的颜色更改为"白色"
  3. 当我们选择部分细胞时，完整的行应该是红色的。请帮我修一下

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');
    });
});​

演示

只需将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/

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'})
});

对于您的第二个问题

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

第一次我不确定，但它像一样工作

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

希望第二个也能工作

关于您的第三个问题：

 $(function(){
   $("td").click(function(){
   $("td").removeClass("on");
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
  });
});

现在检查这个

 $(function(){
      $("tr:last-child td").click(function(){
          $("tr:last-child td").addClass("on");
  });
});
相关文章：