table js(转载)
2012-10-16 13:39 lyw90 阅读(165) 评论(0) 编辑 收藏 举报<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>豪情</title>
<meta content="by 豪情" name="keywords" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;font-family:arial, '宋体';background:#fff;color:#727272;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
img{border:0;}ul,li{list-style-type:none;}
.tc{text-align:center;}.tl{text-align:left;}.tr{text-align:right;}.dis{display:block;}.undis{display:none;}
.fl{float:left;}.fr{float:right;}.clear{clear:both;}em{font-style:normal;}.cp{cursor:pointer;}
select,input,button{font:12px/20px Verdana,Simsun,Helvetica,Arial,sans-serif;}
input,select{vertical-align:middle;}
a{color:#8b5092;text-decoration:none;}
a:hover{color:#090;text-decoration:underline;}
a:focus{outline:0;}
.blank_tab{border-collapse:collapse;border:1px solid #ccc;}
.blank_tab th{border:1px solid #ccc;}
.blank_tab td{border:1px solid #ccc;padding:2px 2px 2px 5px;}
/* tab */
.my_data_tabwrap{width:800px;margin:0 auto 15px;padding-top:30px;}
.tb_data_tab{border-collapse:collapse;border:1px solid #aec1e1;}
.tb_data_tab th{border:1px solid #aec1e1;height:30px;background:#c3d8f5;color:#001f4f;padding:3px 0;}
.tb_data_tab td{border:1px solid #aec1e1;padding:2px 2px 2px 5px;height:30px;}
.tb_data_tab tr{cursor:pointer;}
.tab_intro h4{text-align:center;font-size:14px;color:#000;line-height:25px;}
.tab_head{height:30px;line-height:30px;color:#000;}
.tab_head strong{color:#369;}
.tab_date_info{float:right;}
.tab_busname{float:left;}
.tab_foot_info{float:right;}
.tab_foot_info em{margin-left:10px;}
.trhover{background:#aef;}
.trout{background:#fff;}
.trclick{background:#fc0;}
</style>
</head>
<body>
<table id="myTabData" class="tb_data_tab" style="margin:50px auto;" width="800">
<tr>
<th>序号</th>
<th>支付银行</th>
<th>支付银行</th>
<th>支付银行</th>
<th>支付银行</th>
<th>支付银行</th>
<th>备注</th>
</tr>
<tr>
<td><input type="checkbox" name="" id="" /></td>
<td></td>
<td></td>
<td>333</td>
<td>212</td>
<td>ewe</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" /></td>
<td></td>
<td>22</td>
<td></td>
<td>33</td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" /></td>
<td></td>
<td>22</td>
<td></td>
<td>33</td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" /></td>
<td></td>
<td>22</td>
<td></td>
<td>33</td>
<td></td>
<td></td>
</tr>
</table>
<script type="text/javascript">
function id(){
return document.getElementById(arguments[0]);
}
function tag(name, elem){
return (elem || document).getElementsByTagName(name)
}
/**
* 添加事件
* @param {Object} obj
* @param {Object} type 事件类型
* @param {Function} fun 事件处理函数
*/
function addEvent(obj, type, fun){
if(obj.addEventListener){
obj.addEventListener(type, fun, false);
} else if(obj.attachEvent){
obj.attachEvent('on' + type, function() {
fun.call(obj, window.event);
});
} else {
obj['on' + type] = function() {
fun.call(obj, window.event);
}
}
}
/**
*
* @param {String} elem
* @param {String} name
* @param {String} value
*/
function attr(elem, name, value){
if(!name || name.constructor != String){
return '';
}
//检查name的属性是否在怪异命名情形中
name = {'for': 'htmlFor', 'class': 'className'}[name] || name;
if(typeof value != 'undefined'){
elem[name] = value;
if(elem.setAttribute){
elem.setAttribute(name, value);
}
}
return elem[name] || elem.getAttribute(name) || '';
}
function tabhover(tab, hoverClass, outClass, clickClass){
oTab = id(tab);
if(typeof oTab == undefined) { return false;};
oTabTr = tag('tr', oTab);
var oInputEle = tag('input', oTab);
for(var i=1, len=oTabTr.length; i<len; i++){
oTabTr[i].i = i;
addEvent(oTabTr[i], 'click', function(){
this.className = clickClass;
attr(this, 'open') == 'true' ? attr(this, 'open', 'false') : attr(this, 'open', 'true');
oInputEle[this.i-1].checked = !!oInputEle[this.i-1].checked ? false : true;
});
addEvent(oTabTr[i], 'mouseover', function(){
this.className = hoverClass;
});
addEvent(oTabTr[i], 'mouseout', function(){
this.className = attr(this, 'open') == 'true' ? clickClass : outClass;
});
}
}
tabhover('myTabData', 'trhover', 'trout', 'trclick');
</script></body>
</html>
转载自http://www.cnblogs.com/jikey/archive/2011/07/28/2119853.html
