用col元素快速改变table某列的背景色

最新推荐文章于 2024-08-16 17:45:38 发布

weixin_30323631

最新推荐文章于 2024-08-16 17:45:38 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fuyun2000/archive/2012/04/01/2427890.html

本文介绍了一种利用HTML中的col元素来实现表格列背景色变化的方法。通过简单的JavaScript交互，当鼠标点击表格头部的某列时，可以改变整列的背景色，以此达到美化表格的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

col元素，一个不怎么被提起的元素，甚至有些人根本不知道它的存在，它是表格table中用于控制列的这么一个元素，如果用好了，有时候还是很方便的，譬如接下来要讲的当鼠标点击表格头部某一列时如何改变整列的背景色，OK就来试试

<html>
<head>
  <style type="text/css">
   table{border-collapse:collapse;border:1px solid #666}
   td{border-collapse:collapse;border-bottom:1px solid #666}
   thead td{background:#ddd; cursor:pointer}
   .sel{font-weight:22px; background:green; color:red;}
</style>
<script type="text/javascript">
   function selT(event){
      var cols = document.getElementsByTagName('col');
      var len = cols.length;
      var event = event || window.event;
      var srcEle = event.srcElement||event.target;
      if(srcEle.tagName.toLowerCase() == 'td'){
           var index = srcEle.cellIndex;
           for(var i = 0; i < len; i++){
               index == i?cols[i].className = 'sel' : cols[i].className = '';
           }
      }
   }
</script>
</head>
<body>
<table width="300">
  <col align="left" />
  <col align="left" />
  <col align="right" />
  <thead onclick="selT(event);">
    <tr><td>ISBN</td><td>Title</td><td>Price</td></tr>
  </thead>
  <tr><td>3476896</td><td>My first HTML</td><td>$53</td></tr>
  <tr><td>2489604</td><td>My first CSS</td><td>$47</td></tr>
  <tr><td>3476896</td><td>My first HTML</td><td>$53</td></tr>
  <tr><td>2489604</td><td>My first CSS</td><td>$47</td></tr>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/fuyun2000/archive/2012/04/01/2427890.html