浮动表格增加单击变色

最新推荐文章于 2024-08-14 13:50:25 发布

zwhfyy

最新推荐文章于 2024-08-14 13:50:25 发布

阅读量1.1k

点赞数

分类专栏： Html 文章标签： table function generator div html javascript

本文链接：https://blog.csdn.net/zwhfyy/article/details/778903

版权

Html 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

<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" οnmοuseup="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" οnscrοll="scrollmove(this);" id="floatitem">
<table style="position:relative;" id="tabfloatitem" οnmοuseup="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>