关于表格动态添加行并处理相关表单元素的一些修改----优化for重用(2)

功能介绍:

1.处理了动态行与表单的设值问题
2.添加了行的向上或向下排序
3.添加了可以在当前行的下边或上边增加新行的功能
4.添加了可以单选或勾选多项删除不需要的行的功能
5.添加了新增的行的高亮(以new红标记标注)的功能
6.实现了可以不依靠样式表(即:即使不要<style></style>部分,功能不会一点)
7.实现了方便后端的接收的数据形式(通过一个动态的长度设置,后端获取这个动态长度并且从1开始循环即可接收相关数据)
8.实现了方便后端进行编辑时的界面(即添加与编辑的页面的js代码部分完全不用更改!)

9.做成了插件形式,各项参数采用配置的形式(只需要配置至少5个就可以实现动态TR操作)

界面图如下:         浏览点这里:http://www.beyond630.com/jquery/formtr/v3/3.html

无CSS界面:    浏览点这里:http://www.beyond630.com/jquery/formtr/v3/3simply.html

代码部分:
css.css (非必须)

#tab td a:link {
            font-size:12px;
            color:#91A728;
            text-decoration:none;
        }

        #tab td a:visited {
            font-size:12px;
            color:#91A728;
            text-decoration:none;

        }

        #tab td a:hover {
            font-size:12px;
            color:#FF6600;
            text-decoration:none;
        }

        #tab td a:active {
            font-size:12px;
            color:#91A728;
            text-decoration:none;
        }

        .newdot {
            font-weight:bolder;
            font-family:'幼圆';
            margin-right:3px;
        }

        #tab {
            border-collapse:collapse;border:none;
        }
        #tab td {
            /*对所有被设置为position:relative的单元格会造成双重边,
            所以不应该在td上应该position:relative*/
            border: solid #76B0dF 1px;
            padding:3px;
        }
        #thead td {
        background-color:#079AE4;
        color:#FFFFFF;
        }

        .blocktip {
            display:block;
            color:#CCC;
            margin-top:10px;
        }

        #tbtoolbar {
            text-align:center;
        }

        .btnclass{
            background-color:#079AE4;
            color:#FFF;
            border:2px solid #E9E7E7;
            cursor:pointer;
            font-weight:bolder;
        }

tabletr.js:  (bug修复了)

//接收参数来控制插件的行为
(function($){
$.tablejs = function(options,functionTDList) {
        if(typeof(options)!="object") {return;}    //必须要可行的参数

        //配置项可用重
        var config = {
            tableQID         :        options.tableQID || '#tab',    //表格的#ID,根据HTML的情况而修改
            addnewbtnQID     :        options.addnewbtnQID || '#but', //添加按钮的#ID,根据HTML的情况而修改
            inputLenQID        :        options.inputLenQID || '#inputlen',    //提交到服务器时的真实行数隐藏框的#ID,根据HTML的情况而修改

            allcheckQID        :        options.allcheckQID || '#delckall',    //全选反选按钮的#ID,根据HTML的情况而修改
            delcheckedQID    :        options.delcheckedQID || '#delbtn',    //删除按钮的#ID,根据HTML的情况而修改

            //各项的check框ID前缀.根据需要自行定义,不要与其它元素有冲突就可以了
            //所以可以取复杂点
            itemckIDpre        :        options.itemckIDpre || 'delck_item_index_',    

            //new效果
            newdotVisible    :        options.newdotVisible || true,        //new效果是否需要
            newdotClass     :        options.newdotClass || 'newdot',    //new效果的样式名
            newdotIDpre        :        options.newdotIDpre || 'new_',        //new效果各项ID前缀
            //new效果的文字,如"新","new"等.也可以用图片<img/>标签
            newdotText        :        options.newdotText || '<img src="data:images/newdot.png" width="16" border="0"/>',
            //鼠标移动上时的文字提示
            newdotTitleMsg    :        options.newdotTitleMsg || '当前行为最新增加的行!',    

            //del按钮
            delhrefVisible    :        options.delhrefVisible || true,    //删除链接是否可用
            //删除链接的文字,也可以是图片<img/>标签
            delhrefText        :        options.delhrefText || '<img src="data:images/deltr.png" width="16" border="0"/>',
            //鼠标移动上时的文字提示
            delhrefTitleMsg    :        options.delhrefTitleMsg || '点击删除当前行',

            //向上添加的标记是否可用
            addprehrefVisible    :    options.addprehrefVisible || true,
            //向上添加的标记,可以是文字如"上增"或+↑等
            addprehrefText        :    options.addprehrefText || '<img src="data:images/addup.png" width="16" border="0"/>',
            //鼠标移动到向上添加标记时的文字提示
            addprehrefTitleMsg    :    options.addprehrefTitleMsg || '向上添加一行',
            //向下添加的标记是否可用
            addnexthrefVisible    :    options.addnexthrefVisible || true,
            //向下添加的标记,可以是文字如"下增"或+↓等
            addnexthrefText        :    options.addnexthrefText || '<img src="data:images/adddown.png" width="16" border="0"/>',
            //鼠标移动到向下添加标记时的文字提示
            addnexthrefTitleMsg    :    options.addnexthrefTitleMsg || '向下添加一行',

            //上移是否可用
            moveuphrefVisible    :    options.moveuphrefVisible || true,
            //上移的文字,可以是↓→↑←或"上移"等
            moveuphrefText        :    options.moveuphrefText || '<img src="data:images/trup.png" width="16" border="0"/>',
            //鼠标移动到该标记时的文字提示
            moveuphrefTitleMsg     :    options.moveuphrefTitleMsg || '向上移动',
            //向上移动链接的ID前缀
            moveuphrefIDPre        :    options.moveuphrefIDPre || 'moveup_',
            //向上不可用时的文字或图片标记
            moveuphrefTextX        :    options.moveuphrefTextX || (  options.moveuphrefText ? ((options.moveuphrefText).indexOf('<img ') > 0 ? '<img src="data:images/trupX.png" width="16" border="0"/>' : options.moveuphrefText)  : '<img src="data:images/trupX.png" width="16" border="0"/>' ),
            //鼠标移动到该不可用的标记时的文字提示
            moveuphrefTitleMsgX :    options.moveuphrefTitleMsgX || '不能上移,已最顶',

            //下移是否可用
            movedownhrefVisible    :    options.movedownhrefVisible || true,
            //下移的文字,可以是↓→↑←或"下移"等
            movedownhrefText    :    options.movedownhrefText || '<img src="data:images/trdown.png" width="16" border="0"/>',
            //鼠标移动到该标记时的文字提示
            movedownhrefTitleMsg     :    options.movedownhrefTitleMsg || '向下移动',
            //向下移动链接的ID前缀
            movedownhrefIDPre        :    options.movedownhrefIDPre || 'movedown_',
            //向下不可用时的文字或图片标记
            movedownhrefTextX        :    options.movedownhrefTextX || (  options.movedownhrefText ? ((options.movedownhrefText).indexOf('<img ') > 0 ? '<img src="data:images/trdownX.png" width="16" border="0"/>' : options.movedownhrefText)  : '<img src="data:images/trdownX.png" width="16" border="0"/>' ),
            //鼠标移动到该不可用的标记时的文字提示
            movedownhrefTitleMsgX     :    options.movedownhrefTitleMsgX || '不能下移,已最末',

            //全局函数名设置
            //全局删除函数的名称,防止冲突
            delFunName        :        options.delFunName || 'deleteTrOfIndex',
            //全局上增或下增的函数的名称,防止冲突
            addFunName        :        options.addFunName || 'addTrBeforeOrAfterIndex',
            //全局向上或向下的函数的名称,防止冲突
            moveFunName        :        options.moveFunName || 'moveTrDownIndex'        

        };
        var buildTdList = functionTDList
        //对前两个TD进行设置
        var buildTdCheckAndNum = function (index) {
            var td12 = "<td><input type='checkbox' id='"+config.itemckIDpre+index+"' /></td><td nowrap='nowrap'><div class='countnum' style='position:relative'>"+index+"<div class='"+config.newdotClass+"' id='"+config.newdotIDpre+index+"' style='color:red; font-size:12px;display:none;position:absolute;top:-8px; right:0px;' title='"+config.newdotTitleMsg+"'>"+config.newdotText+"</div></div></td>";
            return td12;
        }

        //对尾两个TD进行设置
        var buildTdActionAndOrder = function (index) {//return '';
            var td12 = "<td nowrap='nowrap'><a href='#' onclick='"+config.delFunName+"("+index+")' title='"+config.delhrefTitleMsg+"'>"+config.delhrefText+"</a>&nbsp;&nbsp;<a href='#' title='"+config.addprehrefTitleMsg+"' onclick='"+config.addFunName+"("+(index-1)+")'>"+config.addprehrefText+"</a>&nbsp;&nbsp;<a href='#' title='"+config.addnexthrefTitleMsg+"' onclick='"+config.addFunName+"("+index+")'>"+config.addnexthrefText+"</a></td><td><a href='#' id='"+config.moveuphrefIDPre+index+"' title='"+config.moveuphrefTitleMsg+"' onclick='"+config.moveFunName+"("+index+")'>"+config.moveuphrefText+"</a>&nbsp;&nbsp;<a href='#' id='"+config.movedownhrefIDPre+index+"' title='"+config.movedownhrefTitleMsg+"' onclick='"+config.moveFunName+"("+(index+1)+")'>"+config.movedownhrefText+"</a></td>";    

            return td12;
        }

        //设置所有的<tr/>居中
        $(config.tableQID+" tr").attr("align","center");

        //模板
        var newtrtemp = function(index,refIndex) {
            //注意这里的+号连接答换行不小心会导致IE执行不了增加操作!
            var tr =  "<tr id="+index+" align='center'>"+ buildTdCheckAndNum(index) + buildTdList(index,refIndex)+buildTdActionAndOrder(index)+"</tr>";

                return tr;
        }

        //全选反选处理
        var allchecked = false;
        $(config.allcheckQID).click(function(){

            allchecked = !allchecked;
            for(var i=$(config.inputLenQID).val()-0 ;i>=1; i--) {
                $('#'+config.itemckIDpre+i)[0].checked = (!allchecked) ? false : 'checked';

            }
        });

        //批量删除处理
        $(config.delcheckedQID).click(function(){
            for(var i=$(config.tableQID+" tr").length-1 ;i>=1; i--) {
                if($('#'+config.itemckIDpre+i)[0].checked) {
                    var delsometr = function(index) {
                        window[config.delFunName](index);
                    }

                    delsometr(i);    //删除单行
                }
            }
            return false;
        });

        //用于限制向上向下时的超界问题
       var moveupHTML = "<a href=\'#\' id='"+config.moveuphrefIDPre+"$k$' title='"+config.moveuphrefTitleMsg+"' onclick=\'"+config.moveFunName+"($k$)\'>"+config.moveuphrefText+"</a>"
       var movedownHTML = "<a href=\'#\' id='"+config.movedownhrefIDPre+"$k$' title='"+config.movedownhrefTitleMsg+"' onclick=\'"+config.moveFunName+"($k+1$)\'>"+config.movedownhrefText+"</a>"
        //设置链接无效,供添加删除等调用
       var disableHref = function() {
         var trlen = $(config.tableQID+' tr').length;
         $(config.tableQID+' tr').each(function(k,v) {
                //将所有的样式及限制还原
                if(k>0 && k< trlen) {
                    $('#'+config.moveuphrefIDPre+k).replaceWith(moveupHTML.replace("$k$",k).replace("$k$",k));
                    $('#'+config.movedownhrefIDPre+k).replaceWith(movedownHTML.replace("$k$",k).replace("$k+1$",(k+1)));
                }

                //单独设置限定项
                if(k==1){
                    $('#'+config.moveuphrefIDPre+k).replaceWith("<span title='"+config.moveuphrefTitleMsgX+"' style='font-weight:lighter;color:#CCC;font-size:12px;' id='"+config.moveuphrefIDPre+k+"'>"+config.moveuphrefTextX+"</span>");
                }

                if(k+1==trlen) {
                    $('#'+config.movedownhrefIDPre+k).replaceWith("<span title='"+config.movedownhrefTitleMsgX+"' style='font-weight:lighter;color:#CCC;font-size:12px;' id='"+config.movedownhrefIDPre+k+"'>"+config.movedownhrefTextX+"</span>");
                }
         });
       }

       //在尾部新增加一项<tr/>
      $(config.addnewbtnQID).click(function(){
         //隐藏new效果
         $('.'+config.newdotClass).hide();
          var _len = $(config.tableQID+" tr").length;
          $(config.tableQID).append(newtrtemp(_len)); 

          //设置新增项有new效果
          $('#'+config.newdotIDpre+_len).show();

          //设置服务器的获取长度
          $(config.inputLenQID).val($(config.tableQID+" tr").length-1);
           //向上及向下的界限处理
           disableHref();

            return false;
        })  

    // 将第i行的内容设置到第j行.即tr(id=i).replaceWith(tr(id=j))
    var MoveTr = function(fromIndex,toIndex,keep) {
        var i = fromIndex;
        var j = toIndex;
        var k = keep //是否保留原先的tr,如果keep=false,则原tr被替换没掉了

            //将当前项(包括表单项值等)设置到第j项项
            $("tr[id=\'"+(k? j : i)+"\']")
                       .replaceWith(newtrtemp(j,i));

    }

    //删除指定索引的<tr/>项
    window[config.delFunName] =function(index)
    {
        var _len = $(config.tableQID+" tr").length;

        //删除当前行
        $("tr[id='"+index+"']").remove();

        //new效果检测
        var hasnewdotID = 0

        //当前删除项的后面部分执行向上替换
        for(var i = index+1,j=_len;i<j;i++){
            //用于检索并获取之前的new效果项
            if(hasnewdotID==0) {
                hasnewdotID = $('#'+config.newdotIDpre+i)[0].style.display != 'none' ? i : 0;
            }

            //将当前行设置到上一行(当前行不保留)
            MoveTr(i,i-1);

        }

        //如果检索到哪个new效果项,设置到新的项去(新项为减1)
        if(hasnewdotID != 0) {
            $('#'+config.newdotIDpre+(hasnewdotID-1)).show();
        }

        //设置服务器的获取长度
          $(config.inputLenQID).val($(config.tableQID+" tr").length-1);
           //向上及向下的界限处理
           disableHref();

            return false;
    }

    //向上移动或向下移动
    window[config.moveFunName] = function(index) {

        var _len = $(config.tableQID+" tr").length;

        //有disableHref();  向上及向下的界限处理后,此下两行可注释,否则开启
        //if(index==1) {alert('第一条无法向上');return false;}
        //if(index==_len)  {alert('最后条无法向下');return false;}

        //新增一行
        $(config.tableQID).append("<tr id='"+_len+"' align='center'><td colspan='9'></td></tr>");

        //检索之前的new效果
        var hasnewdotID = 0
        hasnewdotID = $('#'+config.newdotIDpre+index)[0].style.display != 'none' ? index : 0;
        if(hasnewdotID==0) {
            hasnewdotID = $('#'+config.newdotIDpre+(index-1))[0].style.display != 'none' ? (index-1) : 0;
        }

        //将当前行的内容设置到新增行,保留当前行
        MoveTr(index,_len,true);

         //将上行的内容设置到当前行,保留上行
         MoveTr(index-1,index,true);

         //将新增行内容设置到上行内容
         MoveTr(_len,index-1,true);

        //删除新增行
        var tr=$("tr[id=\'"+_len+"\']")[0];
        var table=tr.parentNode;
        table.removeChild(tr);

        //如果检索到哪个new效果项,设置到新的项去
        if(hasnewdotID!=0) {
            if(hasnewdotID == index) {
                $('#'+config.newdotIDpre+(hasnewdotID-1)).show();
            }else{
                $('#'+config.newdotIDpre+index).show();
            }
        }

        //设置服务器的获取长度
          $(config.inputLenQID).val($(config.tableQID+" tr").length-1);
           //向上及向下的界限处理
           disableHref();

            return false;
}

    //下增一行<tr/> 或上增一行
    window[config.addFunName] =function(index)
    {
        var _len = $(config.tableQID+" tr").length;
         $('.'+config.newdotClass).hide();

        //新增一行
        $(config.tableQID).append(newtrtemp(_len)); 

        //循环:从当前索引的 [下行的下行]到 [新增的项],行内容从循环当前项的"上行"获得
        for(var i=_len,j=index+2; i>=j;i--)
        {
            //将上行的内容设置到当前行并保留上行
              MoveTr(i-1,i,true);
        }   

         //还原新增行
         $("tr[id=\'"+(index+1)+"\']").replaceWith(newtrtemp(index + 1))

        //新增行new效果
          $('#'+config.newdotIDpre+(index + 1)).show();

        //设置服务器的获取长度
          $(config.inputLenQID).val($(config.tableQID+" tr").length-1);
           //向上及向下的界限处理
           disableHref();

            return false;
    }

    //供输入类型选择时显示的处理
    window.changeBH = function(ele,index) {
        var v = ele.options[ele.selectedIndex].value ;
        if(v == '单选框' || v == '下拉框' || v == '多选框') {
            $('#changetext'+index).hide();
            $('#changeselect'+index).show();
        }else{
            $('#changetext'+index).show();
            $('#changeselect'+index).hide();
        }
    }

}
})(jQuery);

调用端JS代码:

<script src='jquery170.js'></script>
<script src='tabletr.js' charset='gbk'></script>
<script>
   $(document).ready(function(){
        $.tablejs({//更多的配置请参看tabletr.js当中的config
            //最小需要配置的五项分别为:tableQID,addnewbtnQID,inputLenQID,allcheckQID,delcheckedQID
            tableQID         :        '#tab',    //表格的#ID,根据HTML的情况而修改
            addnewbtnQID     :        '#but', //添加按钮的#ID,根据HTML的情况而修改

            inputLenQID        :        '#inputlen',    //提交到服务器时的真实行数隐藏框的#ID,根据HTML的情况而修改

            allcheckQID        :        '#delckall',    //全选反选按钮的#ID,根据HTML的情况而修改
            delcheckedQID    :        '#delbtn'    //删除按钮的#ID,根据HTML的情况而修改 

        },buildTdList);

        //中间部分的TD:除了固定的第一项(选择项),第二项(序号项),倒数第二项(操作项),倒数项(排序项)外的其它各项的TD代码构造
        //主要修改的部分也就这里了!哈哈!
       function buildTdList(index,refIndex) {
                var nextTxtVal = '';
                var nextTitleVal = '标题'+Math.floor(Math.random()*(10000000-1000000)+1000000);
                var nextSelectVal = '';    //附加值
                var inputFtypeCK1 = ' selected="selected"';
                var inputFtypeCK2 = '';
                var inputFtypeCK3 = '';
                var inputFtypeCK4 = '';
                var inputFtypeCK5 = '';
                var inputFtypeCK6 = '';

                var displayText = '';    //没有附加值时提示文本是否显示
                var displaySelect = 'none';
                var nextDefaultVal = '';//默认值

                if(!!refIndex) {    //如果需要引用其它tr的值作为构造的新tr值
                    var i = refIndex;
                    //i项的表单值
                    nextTxtVal = $("#inputFtip"+i).val();
                    nextTitleVal = $("#inputFtitle"+i).val();
                    nextSelectVal = $("#inputFselect"+i).val();
                    inputFtypeCK1 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '文本框'
                                        ? '': ' selected=\""+selected+"\"';
                    inputFtypeCK2 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '文本域'
                                        ? '': ' selected=\""+selected+"\"';
                    inputFtypeCK3 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '下拉框'
                                        ? '': ' selected=\""+selected+"\"';
                    inputFtypeCK4 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '单选框'
                                        ? '': ' selected=\""+selected+"\"';
                    inputFtypeCK5 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '多选框'
                                        ? '': ' selected=\""+selected+"\"';
                    inputFtypeCK6 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '上传框'
                                        ? '': ' selected=\""+selected+"\"';

                    displayText = $('#changeselect'+i)[0].style.display == 'none'
                                        ? '' : 'none';
                    displaySelect = $('#changeselect'+i)[0].style.display == 'none'
                                        ? 'none' : '';
                    nextDefaultVal = $("#inputFdefault"+i).val();
                }

                //连接各个需要用到的td
                var tdList = ""
                                        +"<td><input type='text' name='inputFtitle"+index+"' value='"+nextTitleVal+"' id='inputFtitle"+index+"'/></td>"
                                          +"<td><select onchange='changeBH(this,"+index+");' name='inputFtype"+index+"' id='inputFtype"+index+"'><option value='文本框'"+inputFtypeCK1+">文本框</option><option value='文本域'"+inputFtypeCK2+">文本域</option><option value='下拉框'"+inputFtypeCK3+">下拉框</option><option value='单选框'"+inputFtypeCK4+">单选框</option><option value='多选框'"+inputFtypeCK5+">多选框</option><option value='上传框'"+inputFtypeCK6+">上传框</option></select></td>"
                                        +"<td nowrap='nowrap'><div id='changetext"+index+"' style='display:"+displayText+"'><span style='color:#CCCCCC;font-weight:normal'>暂无</span></div><div id='changeselect"+index+"' style='display:"+displaySelect+"'><input type='text' name='inputFselect"+index+"' value='"+nextSelectVal+"' id='inputFselect"+index+"' size='20'/><span style='color:red;font-weight:normal'>*</span></div></td>"
                                        +"<td><input type='text' name='inputFdefault"+index+"' value='"+nextDefaultVal+"' id='inputFdefault"+index+"' size='10'/><span style='color:#CCCCCC;font-weight:normal'></span></td>"
                                        +"<td><input type='text' name='inputFtip"+index+"' value='"+nextTxtVal+"' id='inputFtip"+index+"'/></td>"
                                        +"";

                return tdList;
            }

        //此行用于模拟服务器提交获取的数据
        if(window.location.search!="") {$('#submitform').append('<p>服务器接收到的表单信息为:<br/>'+window.location.search+"</p>");}

        //表单提交时的事件
        $("#submitbtn").click(function(){
            $("#submitform").append('<br/>输入的行数为:'+$("#inputlen").val()+",即inputLen="+$("#inputlen").val()+"<br/>您可以在服务器端通过循环由1到inputLen获取表单数据,比如inputFtitle[inputLen]即为第inputLen个标题输入项&nbsp;&nbsp;&nbsp;&nbsp; <a href='#' onclick='document.getElementById(\"submitform\").submit();'>查看提交的表单数据</a>");
            return false;
        });

})

</script>

HTML界面代码部分:

<!--注意:为了兼容chrome浏览器对动态表格行的表单数据能正常提交到服务器端,<form>标签必须放置在<table>外围-->
<form id="submitform" method="get" target="_blank">
<table id="tab" border="1" width="60%" align="center" style="margin-top:20px" cellspacing="0" cellpadding="0">
        <tr id='thead'>
            <td nowrap="nowrap" width="40"><input type='checkbox' id='delckall' /></td>
            <td nowrap="nowrap" width="80">序号</td>

            <!--////////////////动态部分的标题在这里书写-->
            <td nowrap="nowrap" width="140">标题<span style='color:red;font-weight:normal'>*</span></td>
            <td nowrap="nowrap" width="100">类型<span style='color:red;font-weight:normal'>*</span></td>
            <td nowrap="nowrap" width="100">附加选值</td>
            <td nowrap="nowrap" width="100">默认值</td>
            <td nowrap="nowrap" width="140">输入提示</td>
            <!--End ////////////////动态部分的标题在这里书写-->

            <td nowrap="nowrap" width="140">增删操作</td>
            <td nowrap="nowrap" width="140">排序</td>
       </tr>

<!--以下数据可以有,也可以没有,用于后端编辑:也作为行模板使用,如果一开始不需要这些数据,请删除这些行-->

<!--end 以下数据可以有,也可以没有,用于后端编辑-->

    </table>
<input type="hidden" name="inputlen" value="0" id="inputlen"/>
<div id="tbtoolbar" align="center">
<span class="blocktip">说明：对于附加选值,请用<span style="color:#f80">|</span>号隔开多个值.对于多选框的默认值如果有多个请用<span style="color:#f80">|</span>号隔开</span>
&nbsp;&nbsp;&nbsp;<input class="btnclass" type="button" id="but" value="增加一个"/>
    &nbsp;&nbsp;&nbsp;<input class="btnclass" type="button" id="submitbtn" value="提交看行数"/>

    &nbsp;&nbsp;&nbsp;<input class="btnclass" type="button" id="delbtn" value="删除选定的行数"/>
</div>
</form>