javascript编辑表格

1、说明文档

  下载文档

2、源代码

 function New(aClass, aParams)    //通用创建函数

{
     var empty = {};
    jQuery.extend(empty, aClass, aParams);
     return empty;
};

/*
约定：1.函数手写字母大写的是公有函数，小写的是私有函数
      2.
*/
WSGrid =
{    
    TableId:'',
    tr: null, // 表格上当前编辑的行，要隐藏的行
    editTr: null, // 根据属性“wsEditable='true'”获取的编辑行
    templateTr: null, // 行模版
    table: null, // Init方法根据TableId获取的table的jquery对象
    sumTr: null, // 计算行在tfoot下    
     /*
    描述:各个字段如何取值,设置
    ws_getaid:function(v,flag):从界面上取值
    ws_setaid:function(v,value,flag):设置界面上的值
    ws_getEditaid:function(v,flag):从控件上取值
    ws_setEditaid:function(v,value,flag):设置控件上的值
     */
    GetSetFuncs:{},
     /*
    功能:行数变化时调整编辑行是否显示
     */
    adjustUi: function()
    {
         var _this= this;
         var li_length=_this.table.find("tbody tr[ws_edit !='true']").length;
         // 如果没有普通行则隐藏编辑行
         if(li_length<=0)
        {
            _this.editTr.hide();
        }
         else
        {
             if(li_length==1)
            {                
                _this.editTr.show();
            }
        }
    },
     /*
    功能：初始化,根据tableid获取table存放在变量table中
    算法:1.获取table
         2.获取当前编辑的editTr和tr
     */
    Init: function()
    {
         var _this= this;

         // 1.获取table
        _this.table=$("#"+_this.TableId);

         // 2.获取当前编辑的editTr和tr
        _this.iniGetEditTr();        
    },    
     /*
    功能:获取当前编辑的editTr和对应的隐藏的行
    算法:1.获取editTr
         2.设置编辑的行(隐藏的行)--因为是初始化所以用不含[ws_edit='true']属性的最后一行作为隐藏的行
         3.获取模版行
         4.设置编辑界面
     */
    iniGetEditTr: function()
    {
         var _this= this;
         var li_currrow;
         // 1.获取editTr
        _this.editTr=_this.table.find("tbody tr[ws_edit='true']"); // 编辑界面editTr        
        _this.templateTr=_this.table.find("thead tr[ws_template='true']"); // 行模版
        _this.sumTr=_this.table.find("tfoot tr[ws_sum='true']"); // 合计行

         // 2.设置编辑的行(隐藏的行)
        li_currrow=_this.editTr.attr('rowIndex');        
        li_currrow=li_currrow - 1;        
         // 4.设置编辑界面
        _this.setCurrTr(li_currrow);
         // 行数变化时调整编辑行是否显示
        _this.adjustUi();
    },

     /*
    功能:设置为当前行
    算法:1.根据行号获取tr,隐藏此行
         2.把隐藏的行的值设置到编辑控件上
         3.将editTr移动到隐藏行的后面
    参数:row:rowIndex
     */
    setCurrTr: function(row)
    {
         var _this= this;        
         // 1.根据行号获取tr,隐藏此行                
        _this.tr=_this.table.find("tbody tr[rowIndex='"+row+"']");                
        _this.tr.hide();        

         // 2.把隐藏的行的值设置到编辑控件上
        _this.setValToEditCtrl();    

         // 3.将editTr移动到隐藏行的后面
        $(_this.tr).after(_this.editTr);
    },

     /*
    描述:编辑新行之前,先保存数据，然后显示原编辑行
    算法:1.把当前的控件上的值写到tr对应的界面(非编辑)上
         2.显示原编辑的行
     */
    setLastTr: function()
    {
         var _this= this;
         // 1.把当前的控件上的值写到tr对应的界面(非编辑)上
        _this.setValToTD();

         // 2.显示原编辑的行
        _this.tr.show();
    },        
     /*
    功能:获取自定义函数
     */
    getCustomFunc: function(funcname)
    {
         var _this= this;
         var rtn_func= null;
        $.each(_this.GetSetFuncs, function(k,v)
        {
             if(k==funcname)
            {
                rtn_func=v;
                 return  false;
            }
        });
         return rtn_func;
    },
     /*
    功能:从TD中获取val或者text
    算法:1.从qryObj中获取相关属性         
         2.判断是否有自定义取值函数，如果有则调用自定义函数，否则按照默认取值
         3.flag=0:取value,flag=1:取text
     */
    getTD: function(qryObj,flag)
    {
         var _this= this;
         var func= null;
         var ls_rtn;
         var ls_ws_val,ls_ws_text,ls_ws_dbname,ls_custom_name;
         // 1.从qryObj中获取相关属性
         // ls_ws_val=qryObj.attr("ws_val");
         // ls_ws_text=qryObj.attr("ws_text");
        ls_ws_dbname=qryObj.attr("ws_dbname");
        ls_custom_name='ws_get'+ls_ws_dbname;

         // 2.判断是否有自定义取值函数，如果有则调用自定义函数，否则按照默认取值
        func=_this.getCustomFunc(ls_custom_name);
         if(!func)          
        {
             // 3.按照默认取值(flag=0:取value,flag=1:取text)
             if(flag==0)
            {
                ls_rtn=qryObj.attr('ws_val');            
            }
             else
            {
                ls_rtn=qryObj.attr('ws_text');
            }
        }
         else
        {
            ls_rtn=func(qryObj,flag);
        }
         return ls_rtn;        
    },
     /*
    功能:设置TD的val或者text
    算法:1.从qryObj中获取相关属性         
         2.判断是否有自定义取值函数，如果有则调用自定义函数，否则按照默认设置
         3.flag=0:设value,flag=1:设置text
     */
    setTD: function(qryObj,val,flag)
    {
         var _this= this;
         var func= null;        
         var ls_ws_dbname,ls_custom_name;
         // 1.从qryObj中获取相关属性        
        ls_ws_dbname=qryObj.attr("ws_dbname");
        ls_custom_name='ws_set'+ls_ws_dbname;

         // 2.判断是否有自定义函数，如果有则调用自定义函数，否则按照默认方法
        func=_this.getCustomFunc(ls_custom_name);
         if(!func)          
        {
             // 3.按照默认取值(flag=0:设value,flag=1:设text)
             if(flag==0)
            {
                 if(qryObj.attr("tagName") == "TD")        
                {                
                    qryObj.attr('ws_val',val);                
                }
                 else
                {
                     // 如果是checkbox        
                     if(qryObj.attr("type")=='checkbox')
                    {                                
                         if(val.toString() == 'true')
                        {
                            qryObj.attr('checked','checked');
                        }
                         else
                        {
                            qryObj.removeAttr("checked");
                        }
                        qryObj.attr("ws_val",val);
                    }
                     else // 如果是input或者select
                    {
                        qryObj.attr("value",val);                
                        qryObj.attr("ws_val",val);
                    }
                }
            }
             else
            {
                 if(qryObj.attr("tagName") == "TD")        
                {                
                    qryObj.attr('ws_text',val); // 设置ws_text                
                    qryObj.text(val); // 设置td的显示内容
                }
                 else
                {
                    qryObj.attr('ws_text',val); // 设置ws_text
                }
            }
        }
         else
        {
            func(qryObj,val,flag);
        }        
    },
     /*
    功能:从编辑控件中获取val或者text
    算法:1.从qryObj中获取相关属性         
         2.判断是否有自定义取值函数，如果有则调用自定义函数，否则按照默认取值
         3.flag=0:取value,flag=1:取text
     */
    getEdit: function(qryObj,flag)
    {
         var _this= this;
         var func= null;
         var ls_rtn;
         var ls_ws_val,ls_ws_text,ls_ws_dbname,ls_custom_name;
         // 1.从qryObj中获取相关属性
         // ls_ws_val=qryObj.attr("ws_val");
         // ls_ws_text=qryObj.attr("ws_text");
        ls_ws_dbname=qryObj.attr("ws_dbname");
        ls_custom_name='ws_getEdit'+ls_ws_dbname;

         // 2.判断是否有自定义取值函数，如果有则调用自定义函数，否则按照默认取值
        func=_this.getCustomFunc(ls_custom_name);
         if(!func)          
        {
             // 3.按照默认取值(flag=0:取value,flag=1:取text)
             if(flag==0)
            {
                 if(qryObj.attr("tagName") == "TD")        
                {                
                    ls_rtn=qryObj.attr('ws_val');
                }
                 else
                {
                     // 如果是checkbox        
                     if(qryObj.attr("type")=='checkbox')
                    {                    
                        ls_rtn=qryObj.attr('checked');                                        
                    }
                     else // 如果是input或者select
                    {
                        ls_rtn=qryObj.attr("value");                        
                    }
                }
            }
             else
            {
                 if(qryObj.attr("tagName") == "TD")        
                {                
                    ls_rtn=qryObj.text();
                }
                 else
                {                    
                    switch(qryObj.attr("type"))
                   {
                        case 'checkbox':
                         ls_rtn='';
                          break
                        case 'select-one':
                         ls_rtn=qryObj.find("option:selected").text();
                          break
                        default:
                         ls_rtn=qryObj.attr("value");
                   }
                }
            }
        }
         else
        {
            ls_rtn=func(qryObj,flag);
        }
         return ls_rtn;    
    },
     /*
    功能:设置编辑控件的val或者text
    算法:1.从qryObj中获取相关属性         
         2.判断是否有自定义函数，如果有则调用自定义函数，否则按照默认设置
         3.flag=0:设value,flag=1:设置text
     */
    setEdit: function(qryObj,val,flag)
    {
         var _this= this;
         var func= null;        
         var ls_ws_dbname,ls_custom_name;
         // 1.从qryObj中获取相关属性        
        ls_ws_dbname=qryObj.attr("ws_dbname");
        ls_custom_name='ws_setEdit'+ls_ws_dbname;

         // 2.判断是否有自定义函数，如果有则调用自定义函数，否则按照默认方法
        func=_this.getCustomFunc(ls_custom_name);
         if(!func)          
        {
             // 3.按照默认取值(flag=0:设value,flag=1:设text)
             if(flag==0)
            {
                 if(qryObj.attr("tagName") == "TD")        
                {                
                    qryObj.attr('ws_val',val);                
                }
                 else
                {
                     // 如果是checkbox        
                     if(qryObj.attr("type")=='checkbox')
                    {                    
                         if(val == 'true')
                        {
                            qryObj.attr('checked','checked');
                        }
                         else
                        {
                            qryObj.removeAttr("checked");
                        }
                        qryObj.attr("ws_val",val);
                    }
                     else // 如果是input或者select
                    {
                        qryObj.attr("value",val);                
                        qryObj.attr("ws_val",val);
                    }
                }
            }
             else
            {
                 if(qryObj.attr("tagName") == "TD")        
                {                
                    qryObj.attr('ws_text',val); // 设置ws_text                
                    qryObj.text(val); // 设置td的显示内容
                }
                 else
                {
                    qryObj.attr('ws_text',val); // 设置ws_text
                }
            }
        }
         else
        {
            func(qryObj,val,flag);
        } 
    },
     /*
    功能描述：把this.editTr上的控件的值写到TD上
    算法:1.获取界面tr界面(非编辑)元素
         2.获取editTr上属性为[ws_ctrl='true']的元素
         3.将属性的值设置到tr界面(非编辑)上         
     */
    setValToTD: function()
    {                
         var _this= this;    
         var ls_ws_ctrl_val,ls_ws_ctrl_txt; // editTr上ws_ctrl控件的值和txt
         var ls_ws_dbname;        
         var qryObj= null;
         // 1.获取界面tr界面(非编辑)元素
         var tds=_this.tr.find("[ws_dbname]"); // 包含有ws_dbname属性的元素        

         // 2.获取editTr上属性为[ws_ctrl='true']的元素
        $.each(_this.editTr.find("[ws_ctrl='true']"), function(k,v){            
             // 2.1从编辑控件上获取val和txt

            ls_ws_ctrl_val=_this.getEdit($(v),0);
            ls_ws_ctrl_txt=_this.getEdit($(v),1);

             // 2.2设置非编辑界面的val和txt
            qryObj=$(tds[k]);
            _this.setTD(qryObj,ls_ws_ctrl_val,0);
            _this.setTD(qryObj,ls_ws_ctrl_txt,1);
    });        
    },
     /*
    功能:把表格上的td上的值写到this.editTr的控件上
    算法:
         1.获取this.editTr的控件
         2.获取tr下td的ws_val的值,设置到editTr中td的ws_val和控件的value上         
     */
    setValToEditCtrl: function()
    {
         var _this= this;
         var ls_val,ls_txt; // td上的ws_val和text
         var lc_ctrl,lc_td;                

         // 1.获取this.editTr的控件
         var editTr_ctrls=_this.editTr.find("[ws_ctrl='true']");
        
         // 2.获取tr下td的ws_val的值,设置到editTr中td的ws_val和控件的value上
         var tds=_this.tr.find("[ws_dbname]");
        
        $.each(tds, function(k,v){            
             // 2.1从界面上取值---------------------------------此处要提供虚函数:从界面(非编辑)上取值            
            lc_td=$(v);

            ls_val=_this.getTD(lc_td,0); // 从界面(非编辑)取值
            ls_txt=_this.getTD(lc_td,1); // 从界面(非编辑)取text            


             // 2.2设置到editTr中控件的value上------------------此处要提供虚函数:将从从界面(非编辑)上取值的值设置到编辑行的控件上
            lc_ctrl    =$(editTr_ctrls[k]);            
            _this.setEdit(lc_ctrl,ls_val,0); // 设置编辑控件的值
            _this.setEdit(lc_ctrl,ls_txt,1); // 设置编辑控件的text
        });                    
    },
     /*
    功能:根据界面上显示的行顺序号获取rowIndex    
     */
    getRowIndex: function(showRow)
    {
         var _this= this;
         var showTr=_this.table.find("tbody tr[ws_edit !='true']:eq("+showRow+")");
         if(showTr.html()== null)
        {
            alert('此行不存在');
             return -1;
        }
         return showTr.attr('rowIndex');
    },    
     /*
    功能:编辑某一行
    算法:1.保存上次编辑的行的数据，显示上次编辑时隐藏的行
         2.设置新的编辑的行
    参数:row:rowIndex
     */
    EditRow: function(row)
    {        
         var _this= this;                
         // 1.保存上次编辑的行的数据，显示上次编辑时隐藏的行
        _this.setLastTr();

         // 2.设置新的编辑的行,将新编的行隐藏，数据写到编辑行上，将编辑的界面放到隐藏行的后面
        _this.setCurrTr(row);            
    },

     // ----------------------------------------------
     /*
    功能:删除一行
    参数:row:界面上的序号(不是rowIndex)
    算法:1.判断是否有输入参数
         2.如果没有输入参数则取当前编辑行的rowIndex
         3.如果有输入参数则转换为rowIndex
         4.如果删除的行是正在编辑的行则编辑的行跳转到下一行:nextTr
         5.如果下一行为null,则取上一行:nextTr
         6.如果通过4.5获取nextTr不为null则,此行设置为编辑行,否则什么也不做
         7.删除要删除的行
         8.行数变化时调整编辑行是否显示
     */
    DelRow: function(row)
    {
         var _this= this;
         var li_curr,li_del;    
         var nextTr= null,li_nextTr;
         // 1.判断是否有输入参数
         if(!row)        
        {    
             // 2.如果没有输入参数则取当前编辑行的rowIndex        
            row=_this.tr.attr('rowIndex');                        
        }
         else
        {
             // 3.如果有输入参数则转换为rowIndex
            row=_this.getRowIndex(row);    
        }

         // 获取要删除的行
         var deltr=_this.table.find("tbody tr[rowIndex='"+row+"']"); //         
        li_curr=_this.tr.attr('rowIndex');
        li_del=deltr.attr('rowIndex');

         // 4.如果删除的行是正在编辑的行则编辑的行跳转到下一行:nextTr    
         if(li_del==li_curr)
        {            
            li_nextTr = li_curr + 2;
            nextTr=_this.table.find("tbody tr[rowIndex='"+li_nextTr+"']");            
             if(nextTr.html()== null)
            {                
                 //  5.如果下一行为null,则取上一行:nextTr
                li_nextTr = li_curr - 1;
                nextTr=_this.table.find("tbody tr[rowIndex='"+li_nextTr+"']");
            }
             // 6.如果通过4.5获取nextTr不为null则,此行设置为编辑行,否则什么也不做
             if(nextTr.html()!= null)
            {
                _this.EditRow(li_nextTr);
            }
        }
         // 7.删除要删除的行
        deltr.remove();
         // 8.行数变化时调整编辑行是否显示
        _this.adjustUi();            
    },
     /*
    功能:添加一行
    算法:1.判断tbody可见行数
         2.如果为0则插在隐藏的编辑行之前
         3.如果不为0则插在可见行最后一行之后
         4.编辑新插入的行
         5.返回可见行的行号
     */
    AddRow: function()
    {
         var _this= this;
         var l_newtr= null;
         // 1.判断tbody可见行数        
         var li_length=_this.table.find("tbody tr[ws_edit !='true']").length;
         if(li_length==0)
        {
             // 2.如果为0则插在隐藏的编辑行之前
            l_newtr=_this.templateTr.clone( true).insertBefore(_this.editTr);
        }
         else
        {
             // 3.如果不为0则插在可见行最后一行之后
             var l_last=_this.table.find("tbody tr[ws_edit !='true']").last();
            l_newtr=_this.templateTr.clone( true).insertAfter(l_last);        
        }
         // 4.编辑新插入的行        
        _this.EditRow(l_newtr.attr('rowIndex'));
         // 行数变化时调整编辑行是否显示        
        _this.adjustUi();
        li_length=_this.table.find("tbody tr[ws_edit !='true']").length;
         return li_length - 1;
    },
     /*
    功能:修改某行某列的值或text
    参数:row:界面上的序号(不是rowIndex)
         colNmae:ws_dbname
         val:值或者text
         flag:0:表示值,1:表示text
    算法:1.根据序号获取rowIndex      
         2.根据rowIndex和dbname获取qryObj对象
         3.调用setTD:function(qryObj,val,flag)方法设置数据
         4.如果设置的行是当前编辑的行要把值设置到编辑控件上_this.setEdit(qryObj,val,flag);
     */
    SetItem: function(row,dbname,val,flag)
    {
         var _this= this;
         var qryObj= null;
         var li_curr;
         // 1.根据序号获取rowIndex
        row=_this.getRowIndex(row);        
         // 2.根据rowIndex和dbname获取qryObj对象
        qryObj=_this.table.find("tbody tr[rowIndex='"+row+"']").find("[ws_dbname='"+dbname+"']");        
         // 3.调用setTD:function(qryObj,val,flag)方法设置数据
        _this.setTD(qryObj,val,flag);        
         // 4.如果设置的行是当前编辑的行要把值设置到编辑控件上
        li_curr=_this.tr.attr('rowIndex');        
         if(li_curr==row)
        {            
             // 获取编辑控件上的qryObj对象
            qryObj=_this.editTr.find("[ws_dbname='"+dbname+"']");
            _this.setEdit(qryObj,val,flag);                
        }
    },
     /*
    功能:获取某行某列的值或text
    参数:row:界面上的序号(不是rowIndex)
         colNmae:ws_dbname
         flag:0:表示值,1:表示text
    算法:1.根据序号获取rowIndex
         2.判断取值的行是不是当前编辑的行
         3.如果是当前正在编辑的行则从编辑控件上取值
         4.如果不是正在编辑的行则从非编辑界面上取值
     */
    GetItem: function(row,dbname,flag)
    {
         var _this= this;
         var qryObj= null;
         var li_curr;
         var ls_rtn= null;

         // 1.根据序号获取rowIndex
        row=_this.getRowIndex(row);
         // 2.判断取值的行是不是当前编辑的行
        li_curr=_this.tr.attr('rowIndex');        
         if(li_curr==row)
        {
             // 3.如果是当前正在编辑的行则从编辑控件上取值
            qryObj=_this.editTr.find("[ws_dbname='"+dbname+"']");
            ls_rtn=_this.getEdit(qryObj,flag);
        }
         else
        {
             // 4.如果不是正在编辑的行则从非编辑界面上取值
            qryObj=_this.table.find("tbody tr[rowIndex='"+row+"']").find("[ws_dbname='"+dbname+"']");
            ls_rtn=_this.getTD(qryObj,flag);
        }
         return ls_rtn;
    },
     /*
    功能:计算合计字段的值
    参数:dbname:ws_dbname
    算法:1.判断是否有输入参数
         2.没有输入参数则计算全部合计字段--暂时没有实现
         3.有输入参数则计算指定的合计字段
     */
    SumCol: function(dbname)
    {
         var _this= this;
         var ldc_sum=0.00;
         // 1.判断是否有输入参数
         if(!dbname)
        {
             // 2.没有输入参数则计算全部合计字段--暂时没有实现
             return ;
        }
         else
        {
             // 3.有输入参数则计算指定的合计字段
             var tds=_this.table.find("tbody tr[ws_edit !='true']").find("[ws_dbname='"+dbname+"']");
            $.each(tds, function(k,v){
                ldc_sum+=parseFloat($(v).attr('ws_val'));
            });

             var sumTd=_this.sumTr.find("[ws_dbname='"+dbname+"']");
            sumTd.text(ldc_sum);
        }
    }
};

3、应用举例

< html >
< head >
     < script  type ="text/javascript"  src ="Scripts/jquery-1.4.1.js" ></ script >
     < script  type ="text/javascript"  src ="Scripts/json2.js" ></ script >
     < script  type ="text/javascript"  src ="Scripts/WSEditTable.js" ></ script >
     < script  type ="text/javascript" >
        $( function () { 

             var init={                
                ws_getaid: function(v,flag)
                {                                            
                     if(flag==0)
                    { return v.attr('ws_val');}
                     else
                    {  return v.text();}
                },
                ws_setaid: function(v,value,flag)
                {
                     if(flag==0)
                    {
                        v.attr("ws_val",value);
                    }
                     else
                    {
                        v.text(value);
                        v.attr("ws_text",value);
                    }
                },
                 ws_getEditaid: function(v,flag)
                {
                     if(flag==0)
                    {
                         return v.attr('ws_val');
                    }
                     else
                    {
                         return v.attr('value');
                    }
                },
                ws_setEditaid: function(v,value,flag)
                {
                     if(flag==0)
                    {
                        v.attr("ws_val",value);                        
                    }
                     else
                    {
                        v.attr("ws_text",value);                        
                        v.attr("value",value);                                                
                    }
                }                
            };           
             var grid = New(WSGrid,{TableId:'testTable',GetSetFuncs:init});            
             // var grid = New(WSGrid,{TableId:'testTable'});            
            grid.Init();            

            $("#testTable tbody tr[ws_edit !='true'],#testTable thead tr[ws_template='true']").bind('click', function(){
                 var _this= this;                          
                grid.EditRow($(_this).attr('rowIndex'));                
            });
             /*
             $("#testTable tbody tr[ws_edit='true']").bind('keyup',function(event){
                var _this=this;   
                var li_rowIndex=$(_this).attr('rowIndex');
                
                var keycode = event.which;
                console.info(keycode);
                
                if (keycode == 40) {          
                    grid.EditRow( li_rowIndex + 1);                               
                }
            });
            $("#aidDropDownList").bind('keyup',function(){
            });             
             */
            $('#del').bind('click', function()
            {                 
                 // 删除指定的行,传入的参数从0开始
                 // grid.DelRow($('#delrow').val());
                 // 删除当前行
                grid.DelRow();
            });
            $('#add').bind('click', function()
            { 
                 // 添加一行,返回的参数是添加的行的行号               
                 var li_row=grid.AddRow();            
                 // 设置第li_row行aid列的值    
                grid.SetItem(li_row,'aid','123123',0);
                 // 设置第li_row行aid列的text
                grid.SetItem(li_row,'aid','123123',1);

                 // 获取li_row行segregate_id列的值
                 // alert(grid.GetItem(li_row,'segregate_id',0));                
                 // 获取li_row行segregate_id列的text
                 // alert(grid.GetItem(li_row,'segregate_id',1));                

            });

            $('#test').bind('click', function()
            {                  
                 // 计算合计字段的值
                grid.SumCol('q');
            });
            
        });


     </ script >
</ head >
< body >
     < input  id ='chk'  type ="checkbox" />
     < input  type ="button"  id ='test'  value ="test" />
     < input  type ="button"  value ="删除一行"  id ='del' />
     < input  type ='text'  id ='delrow'  />
     < input  type ="button"  value ="添加一行"  id ='add' />
     < table  id ="testTable"  border ='1'  width ='98%' >
         < thead >
             < tr >
                 < th >序号 </ th >
                 < th >商品编号 </ th >
                 < th >条形码 </ th >
                 < th >商品名称 </ th >
                 < th >类别 </ th >
                 < th >含税进价 </ th >
                 < th >入库数量 </ th >
                 < th >入库金额 </ th >
                 < th >选择 </ th >
                 < th >按钮 </ th >
             </ tr >
             < tr  ws_template ='true'  style ="display:none" >
                 < td  ws_text ='1'  ws_val ='1'  ws_dbname ='xh' >1 </ td >
                 < td  ws_text =''  ws_val =''  ws_dbname ='aid' ></ td >
                 < td  ws_text =''  ws_val =''  ws_dbname ='barcode' ></ td >
                 < td  ws_text =''  ws_val =''  ws_dbname ='article_name' ></ td >
                 < td >
                     < select  type ="select"  ws_text =''  ws_val =''  ws_dbname ='segregate_id' >
                         < option  value ='1' >1 </ option >
                         < option  value ='01001001'  selected ='true' >艺术品 </ option >
                         < option  value ='3' >3 </ option >
                         < option  value ='4' >4 </ option >
                         < option  value ='5' >5 </ option >
                     </ select >
                 </ td >
                 < td  ws_text =''  ws_val =''  ws_dbname ='tax_entry_price' ></ td >
                 < td  ws_text ='0'  ws_val ='0'  ws_dbname ='q' >0 </ td >
                 < td  ws_text ='0'  ws_val ='0'  ws_dbname ='tax_entry_a' >0 </ td >
                 < td >
                     < input  type ="checkbox"  checked ws_text =''  ws_val =''  ws_dbname ='chk' />
                 </ td >
                 < td >
                     < input  type ='button'  value ='click' />
                 </ td >
             </ tr >
         </ thead >
         < tbody >
             < tr  ws_edit ='true' >
                 < td  ws_text =''  ws_val =''  ws_dbname ='xh'  ws_ctrl ='true'  ws_keyNav ='true' ></ td >
                 < td >
                     < input  type ='text'  value =''   ws_text =''  ws_val =''  ws_dbname ='aid'  ws_ctrl ='true'  ws_keyNav ='true'/            
                 </td >
                     < td >
                         < input  type ='text'  value =''  ws_text =''  ws_val =''  ws_dbname ='barcode'  ws_ctrl ='true'  ws_keyNav ='true' />
                     </ td >
                     < td >
                         < input  type ='text'  value =''  ws_text =''  ws_val =''  ws_dbname ='article_name'  ws_ctrl ='true'  ws_keyNav ='true' />
                     </ td >
                     < td >
                         < select  type ="select"  ws_text =''  ws_val ='01001001'  ws_dbname ='segregate_id'  ws_ctrl ='true'  ws_keyNav ='true' >
                             < option  value ='1' >1 </ option >
                             < option  value ='01001001' >艺术品 </ option >
                             < option  value ='3' >3 </ option >
                             < option  value ='4' >4 </ option >
                             < option  value ='5' >5 </ option >
                         </ select >
                     </ td >
                     < td >
                         < input  type ='text'  value =''  ws_text =''  ws_val =''  ws_dbname ='tax_entry_price'  ws_ctrl ='true'  ws_keyNav ='true' />
                     </ td >
                     < td >
                         < input  type ='text'  value =''  ws_text =''  ws_val =''  ws_dbname ='q'  ws_ctrl ='true'  ws_keyNav ='true' />
                     </ td >
                     < td  ws_text =''  ws_val =''   ws_dbname ='tax_entry_a'  ws_ctrl ='true'  ws_keyNav ='true' ></ td >
                     < td >
                         < input  type ='checkbox'  ws_text =''  ws_val ='false'  ws_dbname ='chk'  ws_ctrl ='true'   ws_keyNav ='true' />
                     </ td >
                     < td >
                         < input  type ='button'  value ='click' />
                     </ td >
                 </ tr >
             </ tbody >
             < tfoot >
                 < tr  ws_sum ='true' >
                     < th  colspan ='6' >合计: </ th >                    
                     < th  ws_dbname ='q' ></ th >
                     < th  ws_dbname ='tax_entry_a' ></ th >
                     < th  colspan ='2' ></ th >
                 </ tr >
             </ tfoot >
         </ table >

</body> 

 

4、后续完善内容

 4.1 、数据的提取

 4.2、数据状态(修改过的数据、添加的数据、删除的数据) 

 

转载于:https://www.cnblogs.com/kuailewangzi1212/archive/2012/08/01/2617611.html