Dynamic Add Row Via JQuery

需求：本文应用主要是使用Jquery，进行Table的动态添加列。

涉及技术：JQuery、JSON、Asp.Net

1.希望数据是动态可以添加的；

2.希望数据序列列名（Name,Email）是动态的，可定制的。

最初画面：                                                 最终画面：

    ===》

Html 代码：

 

< table  id ="tbContent" >  
        < tr >  
            < td >  
               1 
            </ td >  
        </ tr >  
        < tr >  
            < td >  
               2 
            </ td >  
        </ tr >  
        < tr >  
            < td >  
               3 
            </ td >  
        </ tr >  
    </ table >

 

JQuery代码：

1.希望数据是动态可以添加的

---我们采用JSON结构

因为数据可能是在HTML中直接构建，也可以从后台生成（即Entity转换成JSON），比较灵活。所以选用JSON。

以下为JSON数据：

 

var  UserList  =  [ 
   {  " UserID " :  1 ,  " Name " : {  " FirstName " :  " Rico " ,  " LastName " :  " Rui "  },  " Email " :  " rico◎hotmail.com "  }, 
   {  " UserID " :  2 ,  " Name " : {  " FirstName " :  " XXX " ,  " LastName " :  " YYY "  },  " Email " :  " xxx◎hotmail.com "  }, 
   {  " UserID " :  3 ,  " Name " : {  " FirstName " :  " ZZZ " ,  " LastName " :  " AAA "  },  " Email " :  " YYY◎hotmail.com "  } 
               ];

 

 

 

2.希望数据序列列名（Name,Email）是动态的，可定制的。

---Ohh,这个想法不错。因为可以动态并可定制的，我们可以针对自已需求即时选用不同选项进行动态显示数据列。

如：在页面上放一个DropDownList设置 Option1：显示1-2项 、Option:显示2-4项  etc..

配置列：

 

var  list1  =  [ " Name.FirstName " ,  " Name.LastName " ];   针对Option1的配置

var  list2  =  [ " Name.FirstName " ,  " Name.LastName " ， " Email " ];   针对Option2的配置

 

以此类配。

好了，差不多。最后附上完整代码

代码：

 

< script language = " javascript "  type = " text/javascript " >  
        $( function () { 
             var  UserList  =  [ 
                    {  " UserID " :  1 ,  " Name " : {  " FirstName " :  " Rico " ,  " LastName " :  " Rui "  },  " Email " :  " rico◎hotmail.com "  }, 
                    {  " UserID " :  2 ,  " Name " : {  " FirstName " :  " XXX " ,  " LastName " :  " YYY "  },  " Email " :  " xxx◎hotmail.com "  }, 
                    {  " UserID " :  3 ,  " Name " : {  " FirstName " :  " ZZZ " ,  " LastName " :  " AAA "  },  " Email " :  " YYY◎hotmail.com "  } 
                    ]; 

      $( ' #tbContent ' ).find( ' tr ' ).each( function (i) { 
                 // 获取基列的tr对象 
                 var  tr  =  $( this ); 
                 // 找到第一列td的值 
                 var  tdFirstTxt  =  tr.find( " td:first " ).text(); 
                 // 获取Json中UserID的值 
                 var  userID  =  UserList[i].UserID; 
                 // 配置用于显示的List模板列 
                 var  list  =  [ " Name.FirstName " ,  " Name.LastName " ]; 
                 // 判断第一列的td值是否与UserID的相对应 
                 if  (tdFirstTxt  ==  userID) { 
                     // 循环List模板列 
                    $.each(list,  function (j) { 
                         // 使用eval用于数组对象转换成JSon的对象。 
                         var  element  =  eval( " UserList[i]. "   +  list[j]); 
                         // 动态添加列，element为动态配置（所属第一列值）其他的值 
                        tr.append( " <td> "   +  element  +   " </td> " ); 
                    }); 
                } 
             }); 
        }); 

< / script>

 

显示最终画面

 

Oh,还有有关于从后台生成数据转换JSON可以参见JSON IN Code.