javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
本文实例讲述了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Table间隔色以及选择高亮(和动态切换数据)</title>
<scripttype="text/javascript">
varDatas1={
"李莫":"毕业于清华大学",
"周平":"毕业于北京大学",
"罗达":"毕业于哈尔滨大学",
"郑朵":"毕业于河南大学",
"王天":"毕业于湖南大学"
};
varDatas2={
"毛票票":"https://www.nhooo.com",
"搜狐网":"http://www.souhu.com",
"CSDN程序员开发网站":"http://www.csdn.net",
"百度":"http://www.baidu.com",
"网易":"http://www.163.com"
};
functionToggleData(){
varbtn=document.getElementById("btnToggle");
if(btn.value=="数据1"){
loadData(Datas1,"数据2");
}
else{
loadData(Datas2,"数据1");
}
}
functionloadData(Datas,btnValue){
vartblMain=document.getElementById("tblMain");
//清空table数据
vartrs=tblMain.getElementsByTagName("tr");
vartrsLen=trs.length;
//必须先把trs的长度存放到一个变量中
for(vari=0;i<trsLen;i++){
tblMain.deleteRow(0);
}
varnIndex=0;
for(varkeyinDatas){
vartr=tblMain.insertRow(-1);
tr.onmouseover=trMouseOver;
tr.onmouseout=trMouseOut;
vartd1=tr.insertCell(-1);
td1.innerHTML=key;
vartd2=tr.insertCell(-1);
td2.innerHTML=Datas[key];
if(nIndex%2==0){//设置间隔色
tr.style.background="yellow";
}
else{
tr.style.background="white";
}
nIndex++;
}
varbtn=document.getElementById("btnToggle");
btn.value=btnValue;
}
functiontrMouseOver(){
vartblMain=document.getElementById("tblMain");
//清空数据
vartrs=tblMain.getElementsByTagName("tr");
for(vari=0;i<trs.length;i++){
if(this==trs[i]){
trs[i].style.background="green";
}
}
}
functiontrMouseOut(){
vartblMain=document.getElementById("tblMain");
vartrs=tblMain.getElementsByTagName("tr");
for(vari=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.background="yellow";
}
else{
trs[i].style.background="white";
}
}
}
functioniniEvent(){
loadData(Datas1,"数据2");
}
</script>
</head>
<bodyonload="iniEvent()">
<tableid="tblMain">
<tbody></tbody>
</table>
<inputtype="button"id="btnToggle"value="数据2"
onclick="ToggleData()"/>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。