首页 > 代码库 > 关于表格动态添加行并处理相关表单元素的一些修改----优化for重用(3) --最终版

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

功能介绍:

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

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

10.修复了所有已知的BUG

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


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

 

核心代码文件:

tabletr.js

//接收参数来控制插件的行为(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_‘,                            //是否需要选择按钮            itemckVisible :         (options.itemckVisible == undefined) ? true  : options.itemckVisible,                        //是否需要数字序号            itemnumberVisible :         (options.itemnumberVisible == undefined) ? true  : options.itemnumberVisible,                                    //new效果            newdotVisible    :        (options.newdotVisible == undefined) ? true  : options.newdotVisible,        //new效果是否需要            newdotClass     :        options.newdotClass || ‘newdot‘,    //new效果的样式名            newdotIDpre        :        options.newdotIDpre || ‘new_‘,        //new效果各项ID前缀            //new效果的文字,如"新","new"等.也可以用图片<img/>标签            newdotText        :        options.newdotText || ‘<img src="http://www.mamicode.com/images/newdot.png" width="18" border="0"/>‘,                //鼠标移动上时的文字提示            newdotTitleMsg    :        options.newdotTitleMsg || ‘当前行为最新增加的行!‘,                            //del按钮            delhrefVisible    :        (options.delhrefVisible == undefined) ? true  : options.delhrefVisible,    //删除链接是否可用            //删除链接的文字,也可以是图片<img/>标签            delhrefText        :        options.delhrefText || ‘<img src="http://www.mamicode.com/images/deltr.png" width="16" border="0"/>‘,                //鼠标移动上时的文字提示            delhrefTitleMsg    :        options.delhrefTitleMsg || ‘点击删除当前行‘,                        //向上添加的标记是否可用            addprehrefVisible    :    (options.addprehrefVisible == undefined) ? true  : options.addprehrefVisible,            //向上添加的标记,可以是文字如"上增"或+↑等            addprehrefText        :    options.addprehrefText || ‘<img src="http://www.mamicode.com/images/addup.png" width="16" border="0"/>‘,                //鼠标移动到向上添加标记时的文字提示            addprehrefTitleMsg    :    options.addprehrefTitleMsg || ‘向上添加一行‘,                //向下添加的标记是否可用            addnexthrefVisible    :    (options.addnexthrefVisible == undefined) ? true  : options.addnexthrefVisible,            //向下添加的标记,可以是文字如"下增"或+↓等            addnexthrefText        :    options.addnexthrefText || ‘<img src="http://www.mamicode.com/images/adddown.png" width="16" border="0"/>‘,            //鼠标移动到向下添加标记时的文字提示            addnexthrefTitleMsg    :    options.addnexthrefTitleMsg || ‘向下添加一行‘,                        //上移是否可用            moveuphrefVisible    :    (options.moveuphrefVisible == undefined) ? true  : options.moveuphrefVisible,            //上移的文字,可以是↓→↑←或"上移"等            moveuphrefText        :    options.moveuphrefText || ‘<img src="http://www.mamicode.com/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="http://www.mamicode.com/images/trupX.png" width="16" border="0"/>‘ : options.moveuphrefText)  : ‘<img src="http://www.mamicode.com/images/trupX.png" width="16" border="0"/>‘ ),                //鼠标移动到该不可用的标记时的文字提示            moveuphrefTitleMsgX :    options.moveuphrefTitleMsgX || ‘不能上移,已最顶‘,                        //下移是否可用            movedownhrefVisible    :    (options.movedownhrefVisible == undefined) ? true  : options.movedownhrefVisible,            //下移的文字,可以是↓→↑←或"下移"等            movedownhrefText    :    options.movedownhrefText || ‘<img src="http://www.mamicode.com/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="http://www.mamicode.com/images/trdownX.png" width="16" border="0"/>‘ : options.movedownhrefText)  : ‘<img src="http://www.mamicode.com/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,refIndex) {            var itemcheckStr = ‘‘;            if(refIndex) {                itemcheckStr = ! $("input[name=‘"+config.itemckIDpre+refIndex+"‘]").eq(0).is(":checked") ? ‘‘ : ‘ checked=\""+checked+"\"‘;            }            var td12 = "<td style=‘display:"+(config.itemckVisible?"":"none")  +"‘><input type=‘checkbox‘ id=‘"+config.itemckIDpre+index+"‘ name=‘"+config.itemckIDpre+index+"‘ "+itemcheckStr+"/></td><td nowrap=‘nowrap‘ style=‘display:"+(config.itemnumberVisible?"":"none")  +"‘><div class=‘countnum‘ style=‘position:relative; width:50px;‘>"+index+"<div class=‘"+config.newdotClass+"‘ id=‘"+config.newdotIDpre+index+"‘ style=‘color:red; font-size:12px;display:none;position:absolute;top:-8px; right:0px; margin-left:20px‘ title=‘"+config.newdotTitleMsg+"‘>"+config.newdotText+"</div></div></td>";                return td12;        }                //对尾两个TD进行设置        var buildTdActionAndOrder = function (index) {//return ‘‘;            var td12 = "<td nowrap=‘nowrap‘ align=‘center‘><a href=http://www.mamicode.com/‘#‘ onclick=‘"+config.delFunName+"("+index+"); return false;‘ title=‘"+config.delhrefTitleMsg+"‘>"+config.delhrefText+"</a>"+(config.addprehrefVisible ? ‘&nbsp;‘ : ‘‘)+"<a href=http://www.mamicode.com/‘#‘ title=‘"+config.addprehrefTitleMsg+"‘ onclick=‘"+config.addFunName+"("+(index-1)+"); return false;‘ style=‘display:"+(config.addprehrefVisible ? ‘inline‘ : ‘none‘)+"‘>"+config.addprehrefText+"</a>"+(config.addnexthrefVisible ? ‘&nbsp;‘ : ‘‘)+"<a href=http://www.mamicode.com/‘#‘ title=‘"+config.addnexthrefTitleMsg+"‘ onclick=‘"+config.addFunName+"("+index+"); return false;‘ style=‘display:"+(config.addnexthrefVisible ? ‘inline‘ : ‘none‘)+"‘>"+config.addnexthrefText+"</a></td><td nowrap=‘nowrap‘ align=‘center‘ style=‘display:"+(config.moveuphrefVisible || config.movedownhrefVisible ? ‘inline‘ : ‘none‘)+"‘><a href=http://www.mamicode.com/‘#‘ id=‘"+config.moveuphrefIDPre+index+"‘ title=‘"+config.moveuphrefTitleMsg+"‘ onclick=‘"+config.moveFunName+"("+index+"); return false;‘ style=‘display:"+(config.moveuphrefVisible ? ‘inline‘ : ‘none‘)+"‘>"+config.moveuphrefText+"</a>"+(config.moveuphrefVisible && config.movedownhrefVisible ? ‘&nbsp;‘ : ‘‘)+"<a href=http://www.mamicode.com/‘#‘ id=‘"+config.movedownhrefIDPre+index+"‘ title=‘"+config.movedownhrefTitleMsg+"‘ onclick=‘"+config.moveFunName+"("+(index+1)+"); return false;‘ style=‘display:"+(config.movedownhrefVisible ? ‘inline‘ : ‘none‘)+"‘>"+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,refIndex) + 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=http://www.mamicode.com/‘#/‘ id=‘"+config.moveuphrefIDPre+"$k$‘ title=‘"+config.moveuphrefTitleMsg+"‘ onclick=\‘"+config.moveFunName+"($k$); return false;\‘ style=‘display:"+(config.moveuphrefVisible ? ‘inline‘ : ‘none‘)+"‘>"+config.moveuphrefText+"</a>"       var movedownHTML = "<a href=http://www.mamicode.com/‘#/‘ id=‘"+config.movedownhrefIDPre+"$k$‘ title=‘"+config.movedownhrefTitleMsg+"‘ onclick=\‘"+config.moveFunName+"($k+1$); return false;\‘ style=‘display:"+(config.movedownhrefVisible ? ‘inline‘ : ‘none‘)+"‘>"+config.movedownhrefText+"</a>"        //设置链接无效,供添加删除等调用       var disableHref = http://www.mamicode.com/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;display:"+(config.moveuphrefVisible ? ‘inline‘ : ‘none‘)+"‘ 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;display:"+(config.movedownhrefVisible ? ‘inline‘ : ‘none‘)+"‘ 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效果          if(config.newdotVisible) $(‘#‘+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.newdotVisible) {            $(‘#‘+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 && config.newdotVisible) {            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效果         if(config.newdotVisible) $(‘#‘+config.newdotIDpre+(index + 1)).show();        //设置服务器的获取长度          $(config.inputLenQID).val($(config.tableQID+" tr").length-1);           //向上及向下的界限处理           disableHref();                       return false;    }            }})(jQuery);

辅助文件:

checkedutil.js

//判断某组以ckName命名的checkbox的第ckI(ckI从0开始)个是否选中,并且返回选中的串 var CheckOne = function(ckName,ckI) {    //以下代码在jquery.1.4.4及以下有bug    //return $("input[name=‘"+ckName+"‘]").eq(ckI).attr(‘checked‘)== undefined  ? ‘‘ : ‘ checked=\""+checked+"\"‘        //换成以下两种方式都可以    //return ! $("input[name=‘"+ckName+"‘]").eq(ckI).attr(‘checked‘)  ? ‘‘ : ‘ checked=\""+checked+"\"‘        return  ! $("input[name=‘"+ckName+"‘]").eq(ckI).is(":checked") ? ‘‘ : ‘ checked=\""+checked+"\"‘    }var SetCheckOne = function(ckName,CheckArray) {    for(var i = 0; i < CheckArray.length; i++) {        //以下代码在1.4.4及以下有bug        //CheckArray[i] =  $("input[name=‘"+ckName+"‘]").eq(i).attr(‘checked‘)== undefined  ? ‘‘ : ‘ checked=\""+checked+"\"‘        //换成以下两种方式都可以        //CheckArray[i] =  ! $("input[name=‘"+ckName+"‘]").eq(i).attr(‘checked‘) ? ‘‘ : ‘ checked=\""+checked+"\"‘            CheckArray[i] =  ! $("input[name=‘"+ckName+"‘]").eq(i).is(":checked") ? ‘‘ : ‘ checked=\""+checked+"\"‘        } }  //判断某组以selectID命名的select的第sI(sI从0开始)个是否选中,并且返回选中的串 var SelectOne = function(selectID,sI) {    return ( $("#"+selectID)[0].selectedIndex != sI) ? ‘‘: ‘ selected=\""+selected+"\"‘; }  var SetSelectOne = function(selectID,selectArray) {    for(var i = 0; i < selectArray.length; i++) {        selectArray[i] =  ( $("#"+selectID)[0].selectedIndex != i) ? ‘‘: ‘ selected=\""+selected+"\"‘;    } }  var DisplayOne = function(eleID) {    return ( $("#"+eleID)[0].style.display != ‘none‘) ? ‘‘: ‘none‘; }

客户端JS代码:

<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的情况而修改                         ////////////////以下为可选配置中的常用项//////////////////                        //向上添加的标记是否可用            addprehrefVisible    :    true,            //向下添加的标记是否可用            addnexthrefVisible    :    true,            //上移是否可用            moveuphrefVisible    :    true,            //下移是否可用            movedownhrefVisible    :    true,            //是否需要选择按钮            itemckVisible        : true,            //是否需要数字序号            itemnumberVisible        : true,                        //new效果            newdotVisible    :    true,                        newdotText        :        ‘<img src="http://www.mamicode.com/images/newdot2.gif" width="16" border="0"/>‘,                        //以上所有行尾部都加,号            _______________________________________:‘-_-^~‘                    },buildTdList);                        //中间部分的TD:除了固定的第一项(选择项),第二项(序号项),倒数第二项(操作项),倒数项(排序项)外的其它各项的TD代码构造        //主要修改的部分也就这里了!哈哈!       function buildTdList(index,refIndex) {                var nextTxtVal = ‘‘;                var nextTitleVal = ‘标题‘+Math.floor(Math.random()*(10000000-1000000)+1000000);                var nextSelectVal = ‘‘;    //附加值                var inputFtypeCK = [‘ selected="selected"‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘]                                    var displayText = ‘‘;    //没有附加值时提示文本是否显示                var displaySelect = ‘none‘;//选择项                var nextDefaultVal = ‘‘;//默认值                                                var inputMustCK =    [‘‘];//是否必填                var inputCanSearch =    [‘‘];//是否搜索(用于数据导出时的过滤)                                            if(!!refIndex) {    //如果需要引用其它tr的值作为构造的新tr值                    var i = refIndex;                    //i项的表单值                    nextTxtVal = $("#inputFtip"+i).val();                    nextTitleVal = $("#inputFtitle"+i).val();                    nextSelectVal = $("#inputFselect"+i).val();                                        SetSelectOne("inputFtype"+i,inputFtypeCK);                                            displayText = DisplayOne(‘changetext‘+i);                    displaySelect = DisplayOne(‘changeselect‘+i);                                        nextDefaultVal = $("#inputFdefault"+i).val();                                                            SetCheckOne(‘inputMust‘+i,inputMustCK);                    SetCheckOne(‘inputCanSearch‘+i,inputCanSearch);                                    }                                                //连接各个需要用到的td                var tdList = ""                                        +"<td><input type=‘text‘ name=‘inputFtitle"+index+"‘ value=http://www.mamicode.com/‘"+nextTitleVal+"‘ id=‘inputFtitle"+index+"‘/></td>"                                          +"<td><select onchange=‘changeBH(this,"+index+");‘ name=‘inputFtype"+index+"‘ id=‘inputFtype"+index+"‘><option value=http://www.mamicode.com/‘文本框‘"+inputFtypeCK[0]+">文本框</option><option value=http://www.mamicode.com/‘文本域‘"+inputFtypeCK[1]+">文本域</option><option value=http://www.mamicode.com/‘下拉框‘"+inputFtypeCK[2]+">下拉框</option><option value=http://www.mamicode.com/‘单选框‘"+inputFtypeCK[3]+">单选框</option><option value=http://www.mamicode.com/‘多选框‘"+inputFtypeCK[4]+">多选框</option><option value=http://www.mamicode.com/‘上传框‘"+inputFtypeCK[5]+">上传框</option><option value=http://www.mamicode.com/‘日期选择‘"+inputFtypeCK[6]+">日期选择</option><option value=http://www.mamicode.com/‘密码框‘"+inputFtypeCK[7]+">密码框</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=http://www.mamicode.com/‘"+nextSelectVal+"‘ id=‘inputFselect"+index+"‘ size=‘20‘/><span style=‘color:red;font-weight:normal‘>*</span></div></td>"                                        +"<td><input type=‘text‘ name=‘inputFdefault"+index+"‘ value=http://www.mamicode.com/‘"+nextDefaultVal+"‘ id=‘inputFdefault"+index+"‘ size=‘10‘/><span style=‘color:#CCCCCC;font-weight:normal‘></span></td>"                                        +"<td><input type=‘text‘ name=‘inputFtip"+index+"‘ value=http://www.mamicode.com/‘"+nextTxtVal+"‘ id=‘inputFtip"+index+"‘/></td>"                                        +"<td nowrap><input type=‘checkbox‘ name=‘inputMust"+index+"‘ value=http://www.mamicode.com/‘1‘"+inputMustCK[0]+"></td>"                                        +"<td nowrap><input type=‘checkbox‘ name=‘inputCanSearch"+index+"‘ value=http://www.mamicode.com/‘1‘"+inputCanSearch[0]+"></td>"                                        +"";                                return tdList;            }                     //表单提交时的事件        $("#submitbtn").click(function(){            var trcheck = trform();                                                if(trcheck) {                $("#msgBox").append(‘<br/>输入的行数为:‘+$("#inputlen").val()+",即inputLen="+$("#inputlen").val()+"<br/>您可以在服务器端通过循环由1到inputLen获取表单数据,比如inputFtitle[inputLen]即为第inputLen个标题输入项&nbsp;&nbsp;&nbsp;&nbsp; <a href=http://www.mamicode.com/‘#‘ onclick=‘document.getElementById(/"submitform\").submit();‘>查看提交的表单数据</a>");                return false;                            //$(‘#submitform‘)[0].submit();            }        });                            //此行用于模拟服务器提交获取的数据        if(window.location.search!="") {$(‘#msgBox‘).append(‘<p>服务器接收到的表单信息为:<br/>‘+window.location.search+"</p>");}                                    //供输入类型选择时显示的处理    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();        }    }                        //验证动态填写的项    window.trform = function(form) {        var len = $(‘#inputlen‘).val();        for(var i = 1; i<=len; i++) {            if($("#inputFtitle"+i).val()==‘‘) {                alert(‘请填写第‘+i+‘行的标题,或者不需要的话删除该行!‘);                $(‘#inputFtitle‘+i).addClass(‘focusborder‘);                window.setTimeout(function(){$(‘#inputFtitle‘+i).removeClass(‘focusborder‘);},1500);                return false;            }                        var ele = $("#inputFtype"+i)[0];            var v = ele.options[ele.selectedIndex].value ;            if(v == ‘单选框‘ || v == ‘下拉框‘ || v == ‘多选框‘){                if($("#inputFselect"+i).val() == ‘‘) {                    alert(‘请填写第‘+i+‘行的附加选值,以|号隔开!!‘);                    $(‘#inputFselect‘+i).addClass(‘focusborder‘);                    window.setTimeout(function(){$(‘#inputFselect‘+i).removeClass(‘focusborder‘);},1500);                    return false;                }            }else if(v == ‘日期选择‘ && $(‘#inputFdefault‘+i).val() != ‘‘) {                if(! (/^(\d{4})-(\d{2})-(\d{2})$/).test($(‘#inputFdefault‘+i).val())) {                    alert(‘默认日期的格式不正确,请参照格式输入,或不填写!‘);                    $(‘#inputFdefault‘+i).addClass(‘focusborder‘);                    window.setTimeout(function(){$(‘#inputFdefault‘+i).removeClass(‘focusborder‘);},1500);                    return false;                }            }        }                return true;    }    })</script>

HTML部分代码:

<!--注意:为了兼容chrome浏览器对动态表格行的表单数据能正常提交到服务器端,<form>标签必须放置在<table>外围--><form id="submitform" method="get" target="_self" onSubmit="return trform(this);" 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" style="display:"><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>            <td nowrap="nowrap" width="50">必填</td>            <td nowrap="nowrap" width="80">可搜索</td>            <!--End ////////////////动态部分的标题在这里书写-->                                    <td nowrap="nowrap" width="100">操作</td>            <td nowrap="nowrap" width="100" style="display:">排序</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>号隔开.对于日期,格式如:2014-11-11</span>&nbsp;&nbsp;&nbsp;<input class="btnclass" type="button" id="but" value="增加一个"/>    &nbsp;&nbsp;&nbsp;<input class="btnclass" type="button" id="submitbtn" value="提交看行数" name="submitbtn"/>    &nbsp;&nbsp;&nbsp;<input class="btnclass" type="button" id="delbtn" value="删除选定的行数"/></div></form><div id="msgBox"></div>

 

 

代码下载地址:   http://files.cnblogs.com/dreamyoung/v3.1.rar

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