table中点击某一行变色

最新推荐文章于 2023-06-14 11:09:51 发布

原创最新推荐文章于 2023-06-14 11:09:51 发布 · 5.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #table #tr #变色

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现表格行点击高亮的方法。通过获取所有表格行元素并为每一行添加点击事件，当点击某一行时，将该行背景色设置为灰色以示选中状态，同时清除其他行的选中样式。

效果图:

<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_