so easy-table添加双击事件和隔行变色

这段时间一直在和前台打交道，我都快成为前台工程师了，嘿嘿，不过咱的后台也没扔下。回到前台，这篇博文主要讲的是table在动态生成数据的时候在每一行添加事件和隔行变色，我这里添加的双击事件。

        过程不复杂，可以说很简单，当然你需要了解才能说简单。就是在table表格中的数据加载完成以后，再取得table的数据行数，在遍历行数的时候添加上双击事件，当然也可以在添加数据的时候就同时添加上数据，我的一个同学就是这样实现的。我这里因为和框架有关所以采用这样的实现方法。

代码如下：

window.onload = function() {
lining.Utils.pageInitAjax("../common/user_expected!initPage.action",windowAfterLoad);
}
functionwindowAfterLoad(){
varcolor1 = "rgb(234,240,255)";
varcolor2 = "rgb(255,255,255)";
varbgColor = "rgb(255,255,193)";
vartableId = document.getElementById("tableID");
vartrs =tableId.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
//给每个tr添加双击事件
trs[i].οndblclick=function(){
showDetail(this);
}
if(i%2==0) {
trs[i].style.backgroundColor=color1;
trs[i].οnmοuseοver= function(){
this.style.backgroundColor= bgColor;
}
trs[i].οnmοuseοut= function(){
this.style.backgroundColor= color1;
}
}else {
trs[i].style.backgroundColor=color2;
trs[i].οnmοuseοver= function(){
this.style.backgroundColor= bgColor;
}
trs[i].οnmοuseοut= function(){
this.style.backgroundColor= color2;
}
}
}
}
functionshowDetail(trs){
vartds=trs.getElementsByTagName("td");
varstrText =tds[2].innerHTML;
//拼接字符串
varstrs = new Array();
strs= strText.split("'",8);
//调用显示细节页面
showDetailPage(strs[1],strs[3],strs[5],strs[7]);
}

       Window.onload 加载数据，然后调用windowAfterLoad，在windowAfterLoad里面获得行数，然后进行操作。这段代码添加事件代码主要是

trs[i].οndblclick=function(){

                                        showDetail(this);

                                        }

       其余代码则是实现隔行变色功能。

       在showDetail（this）中，this指的是tr当然这是一个object（对象），当我在function showDetail（trs）我用trs。innerHTML获得是一个字符串。内容就是tr里面的td内容。根据tr的实现方式我套用在td上面就有showDetail(trs)方法。再通过拼接字符串获得所需要的数据。当然我td[2]中的数据是

<td><ahref="javascript:showDetailPage('{workflowType}', '{workflowId}','{workflowNum}', '{workflowStatus}')">{formTitle}</a></td>

一个需求看起来复杂，当我们深入的理解之后会发现so easy，当然你需要有一定的功底。这就像我们提高班流行的一句话：不怕不知道就怕不知道。

最后

以上就是动人向日葵为你收集整理的so easy-table添加双击事件和隔行变色的全部内容，希望文章能够帮你解决so easy-table添加双击事件和隔行变色所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。