更改特定表的所有<td>颜色onclick

Question

更改特定表的所有<td>颜色onclick

我使用下面的代码来切换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>

Run Code Online (Sandbox Code Playgroud)

上面的代码通过切换td颜色工作正常,请在这里查看演示

但现在我需要做三件事,

上面的代码适用于所有tds,我需要它只适用于表类"mytable"的最后一列,
我需要添加一个按钮,单击该按钮时,应将所有td的颜色更改为表类"mytable"的"白色"
当我们选择部分细胞时,补充行应该是红色.请帮我解决这个问题

Answer 1

the*_*dox 4

超文本标记语言

\n

  <table class="mytable" border=1>\n    <tbody>\n      <tr>\n        <td>Hello World</td>\n        <td>Hello World1</td>\n        <td>Hello World2</td>\n      </tr>\n      <tr>\n        <td>Hello World</td>\n        <td>Hello World1</td>\n        <td>Hello World2</td>\n      </tr>\n      <tr>\n        <td>Hello World</td>\n        <td>Hello World1</td>\n        <td>Hello World2</td>\n      </tr>\n    </tbody>\n  </table>\n\n<button id="change-color">Change Color</button>\n

Run Code Online (Sandbox Code Playgroud)\n

\xe2\x80\x8b\n jQuery

\n

$(function() {\n    $(".mytable tr td:last-child").click(function() {\n        $(this).addClass("on").parent().siblings("tr").find("td.on").removeClass("on");\n    })\n\n    $(\'#change-color\').click(function() {\n        $(\'.mytable td.on\').removeClass(\'on\');\n    });\n});\xe2\x80\x8b\n

Run Code Online (Sandbox Code Playgroud)\n

演示版

\n

根据评论

\n

$(function() {\n    $(".mytable tr td:last-child").click(function() {\n        $(\'td.on\').removeClass(\'on\');\n        $(this).parent().find(\'td\').addClass("on");\n    })\n\n    $(\'#change-color\').click(function() {\n        $(\'.mytable td.on\').removeClass(\'on\');\n    });\n});\xe2\x80\x8b\n

Run Code Online (Sandbox Code Playgroud)\n

演示

\n

归档时间：	13 年，9 月前
查看次数：	2383 次
最近记录：	7 年，7 月前