浮动表格增加单击变色

原创 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)设为选中状态,并应用当前样式)
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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