在网页表格中选中同时高亮一列的方法

原创 2006年06月19日 22:46:00
在網頁表格中可以高亮選中一行,高亮一列就是參照這個方法改進的,下面是代碼。
 
//下面一段是定義樣式表,你可以通過 bgCOLOR 這個屬性改變顔色。
<STYLE type=text/css>
.tableData {
BACKGROUND: #FF0000; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; bgCOLOR: #FF0000;
}
.tableDataHit {
bgCOLOR: white;
}

</STYLE>
<script language="javascript">
var rowNumber=5;//表格一共有多少行,除表頭之外,這個行數可以通過 tableid.rows.length 取得(記得把這句放到函數体内)。
var oldCol=-1; //設置這個變量爲了保存點擊過的列號
function changeColor(hao){
  if(oldCol==-1){
  
      oldCol=parseInt(hao);
  
      for(var i=0;i<rowNumber;i++){
       document.all.d[hao].className="tableData";
       hao = parseInt(hao)+10;
     }
    
  
  }else{
 
    hao =parseInt(hao);
     
    if(oldCol!=hao){
   
     for(var i=0;i<rowNumber;i++){
       document.all.d[oldCol].className="tableDataHit";
       oldCol = parseInt(oldCol)+10;
      }

      oldCol=hao;
    
      for(var i=0;i<rowNumber;i++){
      document.all.d[hao].className="tableData";
      hao = parseInt(hao)+10;
       }
    
       }
  
  }
 
}
</script>

//以下是一個例子可以把它直接拷貝運行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<STYLE type=text/css>
.tableData {
BACKGROUND: #FF0000; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; bgCOLOR: #FF0000;
}
.tableDataHit {
bgCOLOR: white;
}

</STYLE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title></title>
<script language="javascript">
var rowNumber=5;
var oldCol=-1;
function changeColor(hao){
  if(oldCol==-1){
  
      oldCol=parseInt(hao);
  
      for(var i=0;i<rowNumber;i++){
    document.all.d[hao].className="tableData";
    hao = parseInt(hao)+10;
     }
    
  
  }else{
    hao =parseInt(hao);
   // oldCol=parseInt(oldCol);
   
    if(oldCol!=hao){
   
     for(var i=0;i<rowNumber;i++){
       document.all.d[oldCol].className="tableDataHit";
       oldCol = parseInt(oldCol)+10;
      }
      oldCol=hao;
    
    
      for(var i=0;i<rowNumber;i++){
      document.all.d[hao].className="tableData";
      hao = parseInt(hao)+10;
       }
    
       }
  
  }
 
}
</script>
</head>
<body>
<table  id="t1" width="650" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#" onclick="changeColor('0')">1</a></td>
    <td><a href="#" onclick="changeColor('1')">2</a></td>
    <td><a href="#" onclick="changeColor('2')">3</a></td>
    <td><a href="#" onclick="changeColor('3')">4</a></td>
    <td><a href="#" onclick="changeColor('4')">5</a></td>
    <td><a href="#" onclick="changeColor('5')">6</a></td>
    <td><a href="#" onclick="changeColor('6')">7</a></td>
    <td><a href="#" onclick="changeColor('7')">8</a></td>
    <td><a href="#" onclick="changeColor('8')">9</a></td>
    <td><a href="#" onclick="changeColor('9')">10</a></td>
  </tr>
  <tr >
    <td id=d >a</td>
    <td id=d >a</td>
    <td id=d >a</td>
    <td id=d >a</td>
    <td id=d>a</td>
    <td id=d>a</td>
    <td id=d>a</td>
    <td id=d>a</td>
    <td id=d>a</td>
    <td id=d>a</td>
  </tr>
  <tr >
    <td id=d >b</td>
    <td id=d >b</td>
    <td id=d >b</td>
    <td id=d >b</td>
    <td id=d>b</td>
    <td id=d>b</td>
    <td id=d>b</td>
    <td id=d>b</td>
    <td id=d>b</td>
    <td id=d>b</td>
  </tr>
  <tr >
    <td id=d >&nbsp;</td>
    <td id=d >&nbsp;</td>
    <td id=d >&nbsp;</td>
    <td id=d >&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
  </tr>
  <tr >
    <td id=d >&nbsp;</td>
    <td id=d >&nbsp;</td>
    <td id=d >&nbsp;</td>
    <td id=d >&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
  </tr>
  <tr >
    <td id=d >&nbsp;</td>
    <td id=d >&nbsp;</td>
    <td id=d >&nbsp;</td>
    <td id=d >&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
    <td id=d>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

Js+CSS高亮表格代码+方法

  • 2011年08月10日 09:02
  • 4KB
  • 下载

easyui 获取数据表格中选中行的数据 Get selected row data from...

easyui 获取数据表格中选中行的数据 Get selected row data from... 0人收藏此文章, 我要收藏发表于8个月前(2012-02-23 23:43) , 已有146...
  • hongtaq
  • hongtaq
  • 2012年11月05日 15:02
  • 8227

jquery表格高亮插件

  • 2015年01月13日 08:47
  • 1KB
  • 下载

77、jquery表格交叉高亮显示

  • 2015年03月30日 21:29
  • 31KB
  • 下载

【C1FlexGrid&C1DataGrid】高亮显示表格中的查找结果

在应用系统中用户往往会有这样的需求,将表格中检索到的数据进行高亮显示。本文主要讲解如何在C1DataGrid/C1FlexGrid for WPF 控件中实现该功能。 首先,在UI中添加以下XAML...

仿excel表格,固定一列可拉动

  • 2014年07月25日 20:29
  • 249KB
  • 下载

点击表格,高亮,JS代码

我们做数据库的管理系统时会用到表格,我们希望表格能够点击时高亮,
  • tph5559
  • tph5559
  • 2015年10月09日 15:44
  • 243

jQuery 插件 表格高亮显示选中行 全选、反选(四种模式)

无标题文档 jquery表格修饰:隔行换色,点击变色,多选单选变色 .dataTable { border-top: 1px solid #009286; border-right: 1px so...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在网页表格中选中同时高亮一列的方法
举报原因:
原因补充:

(最多只允许输入30个字)