table中 点击某一行变色

时间:2024-04-15 10:36:57

效果图:

table中 点击某一行变色

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>无标题文档</title>
  <script language="javascript" type="text/javascript">
function tagscheck(a) {
    var lng = document.getElementsByTagName("tr").length;
    for (i = 0; i < lng; i++) {
        var temp = document.getElementsByTagName("tr")[i];
        if (a == temp) {
            //选中的标签样式
            temp.style.background = "#ccc";

        } else {
            //恢复原状
            temp.style.background = "";
        }

    }

}

</script>
 </head>
 <body>
  <table width="100%" border="1" cellpadding="2" cellspacing="0">
   <tbody>
    <tr>
     <td bgcolor="#006600">dd </td>
     <td bgcolor="#006600"> dd</td>
     <td bgcolor="#006600">dd </td>
    </tr>
    <tr onclick="tagscheck(this);">
     <td> 2</td>
     <td>3 </td>
     <td>4 </td>
    </tr>
    <tr onclick="tagscheck(this);">
     <td> 45</td>
     <td>456 </td>
     <td>46 </td>
    </tr>
    <tr onclick="tagscheck(this);">
     <td> 3</td>
     <td>3 </td>
     <td>45 </td>
    </tr>
    <tr onclick="tagscheck(this);">
     <td> 67</td>
     <td>7 </td>
     <td>s </td>
    </tr>
    <tr onclick="tagscheck(this);">
     <td>d </td>
     <td> a</td>
     <td>s </td>
    </tr>
    <tr onclick="tagscheck(this);">
     <td> s</td>
     <td> d</td>
     <td>s </td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

参考资料

http://zhidao.baidu.com/link?url=txLVh18itJdgSl-9mIO7YlnaKjmCVLiEhcAaAK5dEaBwASm1QltNH52mcs3BNLMU_Mr3sr0lcrrocXFmuaHGu_