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

原创 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>

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

在網頁表格中可以高亮選中一行,高亮一列就是參照這個方法改進的,下面是代碼。 //下面一段是定義樣式表,你可以通過 bgCOLOR 這個屬性改變顔色。.tableData {BACKGROUND: #F...
  • tony_zhu
  • tony_zhu
  • 2006年06月19日 22:46
  • 1070

根据页面table某列筛选数据

往往有些时候,我们把数据从数据库读取出来,显示到table里面,而此时来了个新需求,要在一个搜索框内输入关键字,表格的内容进行即时的筛选。 而即时触发进行数据库的查询,再回调显示,就显得慢,拖累服务...
  • mai_doudou
  • mai_doudou
  • 2016年03月31日 14:45
  • 1027

javascript (table选中的行以指定颜色高亮显示)

http://www.w3.org/1999/xhtml">     table选中的行以指定颜色高亮显示             function IniEvent() {      ...
  • limlimlim
  • limlimlim
  • 2012年12月25日 17:06
  • 2914

notepad 如何同时选中同一列的数据 Alt

有时会经常遇到这种情况,我们要选中数据中的某一列,这个在记事本中是实现不了的,不过我们可以用更高级一点的编辑器。使用notepad可以帮助我们解决这个问题哦!操作方法就是 按下ALT键 然后再去选择对...
  • alfily
  • alfily
  • 2015年05月25日 15:47
  • 490

excel一列除一列、复制网页后颜色底纹回车键

一、excel一列除以另外一列      假设是A列要除以B列,那就在C列处输入=A1/B1,如下图,同时注意单元格式设置为常规(对着单元格右击就看到设置单元格式了,进去就看到,数字-分类-常规)。 ...
  • qq_20823641
  • qq_20823641
  • 2016年05月17日 08:15
  • 1182

HTML表格固定第一行第一列效果

  • 2015年11月06日 13:47
  • 1KB
  • 下载

jQuery插件,实现表格选中状态及鼠标滑过高亮

一、理论 该部分转自:http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html //jQuery开发插件的两种方法 jQuery.fn...
  • yintianqin
  • yintianqin
  • 2017年06月06日 14:46
  • 538

如何设置在jsp页面高亮显示选中的相同标签

一.首先在eclipse里面把jsp后缀的文件关联起来。 在window->preference->General->Editors->File Associations然后选中把*.jsp后缀的和j...
  • qq_37307063
  • qq_37307063
  • 2017年11月16日 13:56
  • 171

HTML5网页开发实例详解

  • 2014年05月29日 17:15
  • 10.62MB
  • 下载

网页设计中常见的几种布局

1.一列布局,使用margin:0 auto属性 代码: 设置自动居中 body{ margin:0; paddi...
  • qlzx_syzx
  • qlzx_syzx
  • 2016年03月19日 09:55
  • 1326
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在网页表格中选中同时高亮一列的方法
举报原因:
原因补充:

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