浮动表格增加单击变色

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

JQuery datatables 将符合条件的单元格设置特殊背景,添加点击事件

项目中使用到了插件datatables,实在太强大了,有了这样的需求,需要根据数据来显示是否要更换背景,以便区别对待,datatables里面有一个属性是: aocolumndefs,里面可以获取到每...
  • omayyouhappy
  • omayyouhappy
  • 2016年10月24日 19:02
  • 3127

js实现表格变色点击行颜色改变

js实现表格变色点击行颜色改变 table table { border-top:1px solid black; ...
  • cai7095576
  • cai7095576
  • 2014年03月22日 17:00
  • 4889

js实现表格变色点击行颜色改变

 forword http://blog.csdn.net/cai7095576/article/details/21808445 js实现表格变色点击行颜色改变 [h...
  • xiaodanjava
  • xiaodanjava
  • 2016年10月21日 15:21
  • 2973

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

表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式)...
  • xinliuqianxue
  • xinliuqianxue
  • 2015年10月13日 19:35
  • 1926

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

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

表格变色se

  • 2014年09月28日 22:22
  • 3KB
  • 下载

js 实现 选中表格行前的复选框则行变色

  • 2010年03月31日 10:21
  • 1KB
  • 下载

jsp表格变色

  • 2008年05月26日 10:24
  • 2KB
  • 下载

jquery表格变色

  • 2011年07月08日 15:11
  • 2KB
  • 下载

jquery表格变色

  • 2011年07月08日 15:11
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浮动表格增加单击变色
举报原因:
原因补充:

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