浮动表格增加单击变色

原创 2006年06月07日 19:53:00

<pre>${block.newstitle}</pre>内容原样输出

 

 

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
table{border-collapse:collapse;table-layout: fixed;}
td{border:1 solid gray;height:20;}
tr{background:#f1f1f1;}
#fixedhead td ,#floathead td{background:#ddddf1}
</style>
<SCRIPT LANGUAGE="JavaScript">
var colnum=-1;
<!--
function scrollmove(obj){
 document.all("floathead").scrollLeft=obj.scrollLeft;
 document.all("fixeditem").scrollTop=obj.scrollTop;
}
function fixeditemclick(obj){
 if(colnum!=-1){
  obj.children(1).children(colnum).style.backgroundColor="#f1f1f1";
  document.all("tabfloatitem").children(1).children(colnum).style.backgroundColor="#f1f1f1";
 }
 var eveobj=event.srcElement;
 while(eveobj.tagName!="TR"){
  eveobj=eveobj.parentElement;
 }
 for(var i=0;i<obj.children(1).childNodes.length;i++){
  if(obj.children(1).childNodes[i]==eveobj){
   colnum=i;
   eveobj.style.backgroundColor="red";
   document.all("tabfloatitem").children(1).children(i).style.backgroundColor="red";
   break;
  }
 }
}
function floatitemclick(obj){
 if(colnum!=-1){
  obj.children(1).children(colnum).style.backgroundColor="#f1f1f1";
  document.all("tabfixeditem").children(1).children(colnum).style.backgroundColor="#f1f1f1";
 }
 var eveobj=event.srcElement;
 while(eveobj.tagName!="TR"){
  eveobj=eveobj.parentElement;
 }
 for(var i=0;i<obj.children(1).childNodes.length;i++){
  if(obj.children(1).childNodes[i]==eveobj){
   colnum=i;
   eveobj.style.backgroundColor="red";
   document.all("tabfixeditem").children(1).children(i).style.backgroundColor="red";
   break;
  }
 }
}

//-->
</SCRIPT>
</head>

<body style="">
safdsafdsaf<br>
<div style="width:100%;position:relative;height:20;background:#ddddf1" id="alltable">
<!--固定列头-->
<table style="position:absolute;left:0;top:0;z-index:3" id="fixedhead">
<col width=100><col width=101>
<tr>
 <td>1</td>
 <td>1</td>
</tr>
</table>
<!--浮动列头-->
<div style="position:absolute;left:0;top:0;overflow:hidden;z-index:1;width:expression(alltable.clientWidth-17);" id="floathead">
<table style="position:relative;width:100%">
<col width=100><col width=100><col width=100><col width=100><col width=100><col width=100><col>
<tr>
 <td>2</td>
 <td>2</td>
 <td>2</td>
 <td>2</td>
 <td>2</td>
 <td>2</td>
 <td>2</td>
</tr>
</table>
</div>
<!--固定数据列-->
<div style="position:absolute;left:0;top:20;overflow:hidden;z-index:2;height:90" id="fixeditem">
<table   style="position:relative" id="tabfixeditem" onmouseup="fixeditemclick(this);">
<col width=100><col width=101>
<tr>
 <td>3</td>
 <td>3</td>
</tr>
<tr >
 <td>3</td>
 <td>3</td>
</tr>
<tr>
 <td>3</td>
 <td>3</td>
</tr>
<tr>
 <td>3</td>
 <td>3</td>
</tr>
<tr>
 <td>3</td>
 <td>3</td>
</tr>
<tr>
 <td>3</td>
 <td>3</td>
</tr>
<tr>
 <td>3</td>
 <td>3</td>
</tr>
</table>
</div>
<!--浮动数据列-->
<div style="position:absolute;left:0;top:20;width:100%;overflow:scroll;z-index:0;height:105" onscroll="scrollmove(this);" id="floatitem">
<table style="position:relative;" id="tabfloatitem" onmouseup="floatitemclick(this);">
<col width=100><col width=100><col width=100><col width=100><col width=100><col width=100><col>
<tr>
 <td>1</td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td>1</td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td>1</td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
 <td>1</td>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td>1</td>
 <td>1</td>
 <td>1</td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
 <td>1</td>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td>1</td>
 <td>1</td>
 <td>1</td>
</tr>
</table>
</div>
</div>
</body>
</html>

相关文章推荐

表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式)

表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式)...

js 特效 html 特效 浮动的变色层

  • 2011年06月14日 20:55
  • 47KB
  • 下载

隔行变色表格

  • 2013年10月05日 21:20
  • 3KB
  • 下载

CSS表格隔行变色(IE支持)(转)

Member List.datalist{border:1px solid #0058a3; /* 表格边框 */font-family:Arial;border-collapse:collapse;...

表格颜色自动隔行变色

  • 2013年11月15日 13:58
  • 1KB
  • 下载

表格行变色

  • 2012年11月28日 09:45
  • 810B
  • 下载

ajax+js+dom+json+php+mysql实现漂亮的表格各行变色与google分页效果

include "../../../include/dbConn.php"; //查询数据库,得到总的记录数 $rs=mysql_query("select count(*) from area"...

表格隔行换色 鼠标移过变色

  • 2012年09月06日 15:49
  • 2KB
  • 下载

表格点击变色 奇偶不一样

  • 2011年05月19日 16:41
  • 2KB
  • 下载

jQuery动态生成隔行变色表格

jQuery动态生成隔行变色表格下载地址:http://download.csdn.net/detail/lypf19900912/8638743...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浮动表格增加单击变色
举报原因:
原因补充:

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