收集的一个表格特效的JS代码

转载 2006年06月22日 15:43:00

 

< html >  
< head >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >  
< title >  mytable  </ title >  
< script  language ="JavaScript" >  
//  src="anole.js" 
//
 about this: javapig修改 源自 忘了。 
//
 Date: 2006-04-29 

function  anole (
  str_tableid,  
//  table id 
  num_header_offset,  //  表头行数 
  str_odd_color,   //  奇数行的颜色 
  str_even_color,  //  偶数行的颜色 
  str_mover_color,   //  鼠标经过行的颜色 
  str_onclick_color  //  选中行的颜色 
 )  {

 
//  表格ID参数验证 
  if  (  !  str_tableid)  return  alert (str_tableid  +   "  表格不存在!  "  );
 
var  obj_tables =  (document.all  ?  document.all[str_tableid] : document.getElementById(str_tableid));
 
if  (  !  obj_tables)  return  alert (  "  ID为 (  "    +  str_tableid  +    "  )不存在!  "  );

 
//  设置个参数的缺省值 
  var  col_config =  [];
 col_config.header_offset
=  (num_header_offset  ?  num_header_offset :  0  );
 col_config.odd_color
=  (str_odd_color  ?  str_odd_color : '#ffffff');
 col_config.even_color
=  (str_even_color  ?  str_even_color : '#dbeaf5');
 col_config.mover_color
=  (str_mover_color  ?  str_mover_color : '#6699cc');
 col_config.onclick_color
=  (str_onclick_color  ?  str_onclick_color : '#4C7DAB');
 
//  初始化表格(可能多个表格用同一个ID) 
  if  (obj_tables.length)
  
for  (  var  i =    0  ; i  <  obj_tables.length; i  ++  )
  tt_init_table(obj_tables[i], col_config);
 
else  
  tt_init_table(obj_tables, col_config);
}


function  tt_init_table (obj_table, col_config)  {
 
var  col_lconfig =  [],
  col_trs
=  obj_table.rows;
 
if  (  !  col_trs)  return  ;
 
 
for  (  var  i =  col_config.header_offset; i  <  col_trs.length ; i  ++  )  //  i 从 表头以下开始 
  col_trs[i].config =  col_config;
  col_trs[i].lconfig
=  col_lconfig;
  col_trs[i].set_color
=  tt_set_color;
  col_trs[i].onmouseover
=  tt_mover; 
  col_trs[i].onmouseout
=  tt_mout;
  col_trs[i].onmousedown
=  tt_onclick;
  col_trs[i].order
=  (i  -  col_config.header_offset)  %    2  ;
  col_trs[i].onmouseout();
 }

}

function  tt_set_color(str_color)  {
 
this  .style.backgroundColor =  str_color;
}


//  事件操作 
function  tt_mover ()  {
 
if  (  this  .lconfig.clicked  !=   this  )
  
this  .set_color(  this  .config.mover_color);
}

function  tt_mout ()  {
 
if  (  this  .lconfig.clicked  !=   this  )
  
this  .set_color(  this  .order  ?    this  .config.odd_color :  this  .config.even_color);
}

function  tt_onclick ()  {
 
if  (  this  .lconfig.clicked ==   this  )  {
  
this  .lconfig.clicked =    null  ;
  
this  .onmouseover();
 }

 
else   {
  
var  last_clicked =    this  .lconfig.clicked;
  
this  .lconfig.clicked =    this  ;
  
if  (last_clicked) last_clicked.onmouseout();
  
this  .set_color(  this  .config.onclick_color);
 }

}


</ script >  
</ head >  

< body >  
< table  bgcolor ="#9933ff"  align ="center"  cellpadding ="1"  cellspacing ="0"  width ="80%" >  
   
< tr >  
   
< td >   
   
< table  id ="demo"  cellpadding ="1"  cellspacing ="1"  border ="0"  width ="100%"  align ="center" >  
   
< tr >< th  colspan ="2"  bgcolor ="ffffff" >  HTML document object properties  </ th ></ tr >  
   
< tr >< td  width ="20%" >  activeElement  </ td >< td >  Retrieves the object that has the focus.  </ td ></ tr >  
   
< tr >< td >  aLinkColor  </ td >< td >  Sets or retrieves the color of all links in the document.  </ td ></ tr >  
   
< tr >< td >  bgColor  </ td >< td >  Sets or retrieves the background color behe document object.  </ td ></ tr >  
   
< tr >< td >  body  </ td >< td >  Specifies the beginning and end of the document body.  </ td ></ tr >  
   
< tr >< td >  contentEditable  </ td >< td >  Sets or retrieves whether the userdocument object.  </ td ></ tr >  
   
< tr >< td >  cookie  </ td >< td >  Sets or retrieves the string value of a cookie.  </ td ></ tr >  
   
< tr >< td >  defaultCharset  </ td >< td >  Sets or retrieves the default chara of the document.  </ td ></ tr >  
   
< tr >< td >  designMode  </ td >< td >  Sets or retrieves whether the document can be edited.  </ td ></ tr >  
   
< tr >< td >  documentElement  </ td >< td >  Retrieves a reference to the root node of the document.  </ td ></ tr >  
   
< tr >< td >  domain  </ td >< td >  Sets or retrieves the security domain of the document.  </ td ></ tr >  
   
</ table >  
   
</ td >  
   
</ tr >  
   
</ table >  
   
< script  language ="JavaScript" >  
   anole('demo', 
1  , '#ffffff', '#ccccff', '#ffccff', '#cc99ff');
   
</ script >  
  
  
</ body >  
</ html >  

一个JS TAB 特效 代码清晰明了,一看就懂!

无标题文档 .products{ width:960px; height:620px; overflow:hidden; margin-top:10px; position:...

一行js代码!实现一个简洁表格

周一开学了,回去补考 物流 ,悲催的人生。    废话不多说,直接上代码,嗯,4行了,不过明眼人都能看出来它还是一行吧。。 var myTable=new Table({ titl...

js-表格显示特效

  • 2014年02月10日 16:08
  • 34KB
  • 下载

js DOM--实现一个简易的滑动门特效

要求:实现一个滑动门特效效果:http://zhangyugege.github.io/slidedoor/ 源码:https://github.com/zhangyugege/slidedoor ...

表格-js特效-菜单样式

  • 2009年08月29日 15:07
  • 2.27MB
  • 下载

表格特效、js、css、图片

  • 2011年01月27日 17:05
  • 31KB
  • 下载

炫酷的鼠标特效JS 原生代码

star window.onload = function () { C = Math.cos; // cache Math objects ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:收集的一个表格特效的JS代码
举报原因:
原因补充:

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