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、数据状态(修改过的数据、添加的数据、删除的数据)