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，当然你需要有一定的功底。这就像我们提高班流行的一句话：不怕不知道就怕不知道。