功能介绍:

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 (非必须)

  1. #tab td a:link {
  2.             font-size:12px;
  3.             color:#91A728;
  4.             text-decoration:none;
  5.         }
  6.  
  7.         #tab td a:visited {
  8.             font-size:12px;
  9.             color:#91A728;
  10.             text-decoration:none;
  11.  
  12.         }
  13.  
  14.         #tab td a:hover {
  15.             font-size:12px;
  16.             color:#FF6600;
  17.             text-decoration:none;
  18.         }
  19.  
  20.         #tab td a:active {
  21.             font-size:12px;
  22.             color:#91A728;
  23.             text-decoration:none;
  24.         }
  25.  
  26.         .newdot {
  27.             font-weight:bolder;
  28.             font-family:'幼圆';
  29.             margin-right:3px;
  30.         }
  31.  
  32.         #tab {
  33.             border-collapse:collapse;border:none;
  34.         }
  35.         #tab td {
  36.             /*对所有被设置为position:relative的单元格会造成双重边,
  37.             所以不应该在td上应该position:relative*/
  38.             border: solid #76B0dF 1px;
  39.             padding:3px;
  40.         }
  41.         #thead td {
  42.         background-color:#079AE4;
  43.         color:#FFFFFF;
  44.         }
  45.  
  46.         .blocktip {
  47.             display:block;
  48.             color:#CCC;
  49.             margin-top:10px;
  50.         }
  51.  
  52.         #tbtoolbar {
  53.             text-align:center;
  54.         }
  55.  
  56.         .btnclass{
  57.             background-color:#079AE4;
  58.             color:#FFF;
  59.             border:2px solid #E9E7E7;
  60.             cursor:pointer;
  61.             font-weight:bolder;
  62.         }

tabletr.js:  (bug修复了)

  1. //接收参数来控制插件的行为
  2. (function($){
  3. $.tablejs = function(options,functionTDList) {
  4.         if(typeof(options)!="object") {return;}    //必须要可行的参数
  5.  
  6.         //配置项可用重
  7.         var config = {
  8.             tableQID         :        options.tableQID || '#tab',    //表格的#ID,根据HTML的情况而修改
  9.             addnewbtnQID     :        options.addnewbtnQID || '#but', //添加按钮的#ID,根据HTML的情况而修改
  10.             inputLenQID        :        options.inputLenQID || '#inputlen',    //提交到服务器时的真实行数隐藏框的#ID,根据HTML的情况而修改
  11.  
  12.             allcheckQID        :        options.allcheckQID || '#delckall',    //全选反选按钮的#ID,根据HTML的情况而修改
  13.             delcheckedQID    :        options.delcheckedQID || '#delbtn',    //删除按钮的#ID,根据HTML的情况而修改
  14.  
  15.             //各项的check框ID前缀.根据需要自行定义,不要与其它元素有冲突就可以了
  16.             //所以可以取复杂点
  17.             itemckIDpre        :        options.itemckIDpre || 'delck_item_index_',    
  18.  
  19.             //new效果
  20.             newdotVisible    :        options.newdotVisible || true,        //new效果是否需要
  21.             newdotClass     :        options.newdotClass || 'newdot',    //new效果的样式名
  22.             newdotIDpre        :        options.newdotIDpre || 'new_',        //new效果各项ID前缀
  23.             //new效果的文字,如"新","new"等.也可以用图片<img/>标签
  24.             newdotText        :        options.newdotText || '<img src="data:images/newdot.png" width="16" border="0"/>',
  25.             //鼠标移动上时的文字提示
  26.             newdotTitleMsg    :        options.newdotTitleMsg || '当前行为最新增加的行!',    
  27.  
  28.             //del按钮
  29.             delhrefVisible    :        options.delhrefVisible || true,    //删除链接是否可用
  30.             //删除链接的文字,也可以是图片<img/>标签
  31.             delhrefText        :        options.delhrefText || '<img src="data:images/deltr.png" width="16" border="0"/>',
  32.             //鼠标移动上时的文字提示
  33.             delhrefTitleMsg    :        options.delhrefTitleMsg || '点击删除当前行',
  34.  
  35.             //向上添加的标记是否可用
  36.             addprehrefVisible    :    options.addprehrefVisible || true,
  37.             //向上添加的标记,可以是文字如"上增"或+↑等
  38.             addprehrefText        :    options.addprehrefText || '<img src="data:images/addup.png" width="16" border="0"/>',
  39.             //鼠标移动到向上添加标记时的文字提示
  40.             addprehrefTitleMsg    :    options.addprehrefTitleMsg || '向上添加一行',
  41.             //向下添加的标记是否可用
  42.             addnexthrefVisible    :    options.addnexthrefVisible || true,
  43.             //向下添加的标记,可以是文字如"下增"或+↓等
  44.             addnexthrefText        :    options.addnexthrefText || '<img src="data:images/adddown.png" width="16" border="0"/>',
  45.             //鼠标移动到向下添加标记时的文字提示
  46.             addnexthrefTitleMsg    :    options.addnexthrefTitleMsg || '向下添加一行',
  47.  
  48.             //上移是否可用
  49.             moveuphrefVisible    :    options.moveuphrefVisible || true,
  50.             //上移的文字,可以是↓→↑←或"上移"等
  51.             moveuphrefText        :    options.moveuphrefText || '<img src="data:images/trup.png" width="16" border="0"/>',
  52.             //鼠标移动到该标记时的文字提示
  53.             moveuphrefTitleMsg     :    options.moveuphrefTitleMsg || '向上移动',
  54.             //向上移动链接的ID前缀
  55.             moveuphrefIDPre        :    options.moveuphrefIDPre || 'moveup_',
  56.             //向上不可用时的文字或图片标记
  57.             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"/>' ),
  58.             //鼠标移动到该不可用的标记时的文字提示
  59.             moveuphrefTitleMsgX :    options.moveuphrefTitleMsgX || '不能上移,已最顶',
  60.  
  61.             //下移是否可用
  62.             movedownhrefVisible    :    options.movedownhrefVisible || true,
  63.             //下移的文字,可以是↓→↑←或"下移"等
  64.             movedownhrefText    :    options.movedownhrefText || '<img src="data:images/trdown.png" width="16" border="0"/>',
  65.             //鼠标移动到该标记时的文字提示
  66.             movedownhrefTitleMsg     :    options.movedownhrefTitleMsg || '向下移动',
  67.             //向下移动链接的ID前缀
  68.             movedownhrefIDPre        :    options.movedownhrefIDPre || 'movedown_',
  69.             //向下不可用时的文字或图片标记
  70.             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"/>' ),
  71.             //鼠标移动到该不可用的标记时的文字提示
  72.             movedownhrefTitleMsgX     :    options.movedownhrefTitleMsgX || '不能下移,已最末',
  73.  
  74.             //全局函数名设置
  75.             //全局删除函数的名称,防止冲突
  76.             delFunName        :        options.delFunName || 'deleteTrOfIndex',
  77.             //全局上增或下增的函数的名称,防止冲突
  78.             addFunName        :        options.addFunName || 'addTrBeforeOrAfterIndex',
  79.             //全局向上或向下的函数的名称,防止冲突
  80.             moveFunName        :        options.moveFunName || 'moveTrDownIndex'        
  81.  
  82.         };
  83.         var buildTdList = functionTDList
  84.         //对前两个TD进行设置
  85.         var buildTdCheckAndNum = function (index) {
  86.             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>";
  87.             return td12;
  88.         }
  89.  
  90.         //对尾两个TD进行设置
  91.         var buildTdActionAndOrder = function (index) {//return '';
  92.             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>";    
  93.  
  94.             return td12;
  95.         }
  96.  
  97.         //设置所有的<tr/>居中
  98.         $(config.tableQID+" tr").attr("align","center");
  99.  
  100.         //模板
  101.         var newtrtemp = function(index,refIndex) {
  102.             //注意这里的+号连接答换行不小心会导致IE执行不了增加操作!
  103.             var tr =  "<tr id="+index+" align='center'>"+ buildTdCheckAndNum(index) + buildTdList(index,refIndex)+buildTdActionAndOrder(index)+"</tr>";
  104.  
  105.                 return tr;
  106.         }
  107.  
  108.         //全选反选处理
  109.         var allchecked = false;
  110.         $(config.allcheckQID).click(function(){
  111.  
  112.             allchecked = !allchecked;
  113.             for(var i=$(config.inputLenQID).val()-0 ;i>=1; i--) {
  114.                 $('#'+config.itemckIDpre+i)[0].checked = (!allchecked) ? false : 'checked';
  115.  
  116.             }
  117.         });
  118.  
  119.         //批量删除处理
  120.         $(config.delcheckedQID).click(function(){
  121.             for(var i=$(config.tableQID+" tr").length-1 ;i>=1; i--) {
  122.                 if($('#'+config.itemckIDpre+i)[0].checked) {
  123.                     var delsometr = function(index) {
  124.                         window[config.delFunName](index);
  125.                     }
  126.  
  127.                     delsometr(i);    //删除单行
  128.                 }
  129.             }
  130.             return false;
  131.         });
  132.  
  133.         //用于限制向上向下时的超界问题
  134.        var moveupHTML = "<a href=\'#\' id='"+config.moveuphrefIDPre+"$k$' title='"+config.moveuphrefTitleMsg+"' onclick=\'"+config.moveFunName+"($k$)\'>"+config.moveuphrefText+"</a>"
  135.        var movedownHTML = "<a href=\'#\' id='"+config.movedownhrefIDPre+"$k$' title='"+config.movedownhrefTitleMsg+"' onclick=\'"+config.moveFunName+"($k+1$)\'>"+config.movedownhrefText+"</a>"
  136.         //设置链接无效,供添加删除等调用
  137.        var disableHref = function() {
  138.          var trlen = $(config.tableQID+' tr').length;
  139.          $(config.tableQID+' tr').each(function(k,v) {
  140.                 //将所有的样式及限制还原
  141.                 if(k>0 && k< trlen) {
  142.                     $('#'+config.moveuphrefIDPre+k).replaceWith(moveupHTML.replace("$k$",k).replace("$k$",k));
  143.                     $('#'+config.movedownhrefIDPre+k).replaceWith(movedownHTML.replace("$k$",k).replace("$k+1$",(k+1)));
  144.                 }
  145.  
  146.                 //单独设置限定项
  147.                 if(k==1){
  148.                     $('#'+config.moveuphrefIDPre+k).replaceWith("<span title='"+config.moveuphrefTitleMsgX+"' style='font-weight:lighter;color:#CCC;font-size:12px;' id='"+config.moveuphrefIDPre+k+"'>"+config.moveuphrefTextX+"</span>");
  149.                 }
  150.  
  151.                 if(k+1==trlen) {
  152.                     $('#'+config.movedownhrefIDPre+k).replaceWith("<span title='"+config.movedownhrefTitleMsgX+"' style='font-weight:lighter;color:#CCC;font-size:12px;' id='"+config.movedownhrefIDPre+k+"'>"+config.movedownhrefTextX+"</span>");
  153.                 }
  154.          });
  155.        }
  156.  
  157.        //在尾部新增加一项<tr/>
  158.       $(config.addnewbtnQID).click(function(){
  159.          //隐藏new效果
  160.          $('.'+config.newdotClass).hide();
  161.           var _len = $(config.tableQID+" tr").length;
  162.           $(config.tableQID).append(newtrtemp(_len)); 
  163.  
  164.           //设置新增项有new效果
  165.           $('#'+config.newdotIDpre+_len).show();
  166.  
  167.           //设置服务器的获取长度
  168.           $(config.inputLenQID).val($(config.tableQID+" tr").length-1);
  169.            //向上及向下的界限处理
  170.            disableHref();
  171.  
  172.             return false;
  173.         })  
  174.  
  175.     // 将第i行的内容设置到第j行.即tr(id=i).replaceWith(tr(id=j))
  176.     var MoveTr = function(fromIndex,toIndex,keep) {
  177.         var i = fromIndex;
  178.         var j = toIndex;
  179.         var k = keep //是否保留原先的tr,如果keep=false,则原tr被替换没掉了
  180.  
  181.             //将当前项(包括表单项值等)设置到第j项项
  182.             $("tr[id=\'"+(k? j : i)+"\']")
  183.                        .replaceWith(newtrtemp(j,i));
  184.  
  185.     }
  186.  
  187.     //删除指定索引的<tr/>项
  188.     window[config.delFunName] =function(index)
  189.     {
  190.         var _len = $(config.tableQID+" tr").length;
  191.  
  192.         //删除当前行
  193.         $("tr[id='"+index+"']").remove();
  194.  
  195.         //new效果检测
  196.         var hasnewdotID = 0
  197.  
  198.         //当前删除项的后面部分执行向上替换
  199.         for(var i = index+1,j=_len;i<j;i++){
  200.             //用于检索并获取之前的new效果项
  201.             if(hasnewdotID==0) {
  202.                 hasnewdotID = $('#'+config.newdotIDpre+i)[0].style.display != 'none' ? i : 0;
  203.             }
  204.  
  205.             //将当前行设置到上一行(当前行不保留)
  206.             MoveTr(i,i-1);
  207.  
  208.         }
  209.  
  210.         //如果检索到哪个new效果项,设置到新的项去(新项为减1)
  211.         if(hasnewdotID != 0) {
  212.             $('#'+config.newdotIDpre+(hasnewdotID-1)).show();
  213.         }
  214.  
  215.         //设置服务器的获取长度
  216.           $(config.inputLenQID).val($(config.tableQID+" tr").length-1);
  217.            //向上及向下的界限处理
  218.            disableHref();
  219.  
  220.             return false;
  221.     }
  222.  
  223.     //向上移动或向下移动
  224.     window[config.moveFunName] = function(index) {
  225.  
  226.         var _len = $(config.tableQID+" tr").length;
  227.  
  228.         //有disableHref();  向上及向下的界限处理后,此下两行可注释,否则开启
  229.         //if(index==1) {alert('第一条无法向上');return false;}
  230.         //if(index==_len)  {alert('最后条无法向下');return false;}
  231.  
  232.         //新增一行
  233.         $(config.tableQID).append("<tr id='"+_len+"' align='center'><td colspan='9'></td></tr>");
  234.  
  235.         //检索之前的new效果
  236.         var hasnewdotID = 0
  237.         hasnewdotID = $('#'+config.newdotIDpre+index)[0].style.display != 'none' ? index : 0;
  238.         if(hasnewdotID==0) {
  239.             hasnewdotID = $('#'+config.newdotIDpre+(index-1))[0].style.display != 'none' ? (index-1) : 0;
  240.         }
  241.  
  242.         //将当前行的内容设置到新增行,保留当前行
  243.         MoveTr(index,_len,true);
  244.  
  245.          //将上行的内容设置到当前行,保留上行
  246.          MoveTr(index-1,index,true);
  247.  
  248.          //将新增行内容设置到上行内容
  249.          MoveTr(_len,index-1,true);
  250.  
  251.         //删除新增行
  252.         var tr=$("tr[id=\'"+_len+"\']")[0];
  253.         var table=tr.parentNode;
  254.         table.removeChild(tr);
  255.  
  256.         //如果检索到哪个new效果项,设置到新的项去
  257.         if(hasnewdotID!=0) {
  258.             if(hasnewdotID == index) {
  259.                 $('#'+config.newdotIDpre+(hasnewdotID-1)).show();
  260.             }else{
  261.                 $('#'+config.newdotIDpre+index).show();
  262.             }
  263.         }
  264.  
  265.         //设置服务器的获取长度
  266.           $(config.inputLenQID).val($(config.tableQID+" tr").length-1);
  267.            //向上及向下的界限处理
  268.            disableHref();
  269.  
  270.             return false;
  271. }
  272.  
  273.     //下增一行<tr/> 或上增一行
  274.     window[config.addFunName] =function(index)
  275.     {
  276.         var _len = $(config.tableQID+" tr").length;
  277.          $('.'+config.newdotClass).hide();
  278.  
  279.         //新增一行
  280.         $(config.tableQID).append(newtrtemp(_len)); 
  281.  
  282.         //循环:从当前索引的 [下行的下行]到 [新增的项],行内容从循环当前项的"上行"获得
  283.         for(var i=_len,j=index+2; i>=j;i--)
  284.         {
  285.             //将上行的内容设置到当前行并保留上行
  286.               MoveTr(i-1,i,true);
  287.         }   
  288.  
  289.          //还原新增行
  290.          $("tr[id=\'"+(index+1)+"\']").replaceWith(newtrtemp(index + 1))
  291.  
  292.         //新增行new效果
  293.           $('#'+config.newdotIDpre+(index + 1)).show();
  294.  
  295.         //设置服务器的获取长度
  296.           $(config.inputLenQID).val($(config.tableQID+" tr").length-1);
  297.            //向上及向下的界限处理
  298.            disableHref();
  299.  
  300.             return false;
  301.     }
  302.  
  303.     //供输入类型选择时显示的处理
  304.     window.changeBH = function(ele,index) {
  305.         var v = ele.options[ele.selectedIndex].value ;
  306.         if(v == '单选框' || v == '下拉框' || v == '多选框') {
  307.             $('#changetext'+index).hide();
  308.             $('#changeselect'+index).show();
  309.         }else{
  310.             $('#changetext'+index).show();
  311.             $('#changeselect'+index).hide();
  312.         }
  313.     }
  314.  
  315. }
  316. })(jQuery);

调用端JS代码:

  1. <script src='jquery170.js'></script>
  2. <script src='tabletr.js' charset='gbk'></script>
  3. <script>
  4.    $(document).ready(function(){
  5.         $.tablejs({//更多的配置请参看tabletr.js当中的config
  6.             //最小需要配置的五项分别为:tableQID,addnewbtnQID,inputLenQID,allcheckQID,delcheckedQID
  7.             tableQID         :        '#tab',    //表格的#ID,根据HTML的情况而修改
  8.             addnewbtnQID     :        '#but', //添加按钮的#ID,根据HTML的情况而修改
  9.  
  10.             inputLenQID        :        '#inputlen',    //提交到服务器时的真实行数隐藏框的#ID,根据HTML的情况而修改
  11.  
  12.             allcheckQID        :        '#delckall',    //全选反选按钮的#ID,根据HTML的情况而修改
  13.             delcheckedQID    :        '#delbtn'    //删除按钮的#ID,根据HTML的情况而修改 
  14.  
  15.         },buildTdList);
  16.  
  17.         //中间部分的TD:除了固定的第一项(选择项),第二项(序号项),倒数第二项(操作项),倒数项(排序项)外的其它各项的TD代码构造
  18.         //主要修改的部分也就这里了!哈哈!
  19.        function buildTdList(index,refIndex) {
  20.                 var nextTxtVal = '';
  21.                 var nextTitleVal = '标题'+Math.floor(Math.random()*(10000000-1000000)+1000000);
  22.                 var nextSelectVal = '';    //附加值
  23.                 var inputFtypeCK1 = ' selected="selected"';
  24.                 var inputFtypeCK2 = '';
  25.                 var inputFtypeCK3 = '';
  26.                 var inputFtypeCK4 = '';
  27.                 var inputFtypeCK5 = '';
  28.                 var inputFtypeCK6 = '';
  29.  
  30.                 var displayText = '';    //没有附加值时提示文本是否显示
  31.                 var displaySelect = 'none';
  32.                 var nextDefaultVal = '';//默认值
  33.  
  34.                 if(!!refIndex) {    //如果需要引用其它tr的值作为构造的新tr值
  35.                     var i = refIndex;
  36.                     //i项的表单值
  37.                     nextTxtVal = $("#inputFtip"+i).val();
  38.                     nextTitleVal = $("#inputFtitle"+i).val();
  39.                     nextSelectVal = $("#inputFselect"+i).val();
  40.                     inputFtypeCK1 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '文本框'
  41.                                         ? '': ' selected=\""+selected+"\"';
  42.                     inputFtypeCK2 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '文本域'
  43.                                         ? '': ' selected=\""+selected+"\"';
  44.                     inputFtypeCK3 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '下拉框'
  45.                                         ? '': ' selected=\""+selected+"\"';
  46.                     inputFtypeCK4 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '单选框'
  47.                                         ? '': ' selected=\""+selected+"\"';
  48.                     inputFtypeCK5 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '多选框'
  49.                                         ? '': ' selected=\""+selected+"\"';
  50.                     inputFtypeCK6 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '上传框'
  51.                                         ? '': ' selected=\""+selected+"\"';
  52.  
  53.                     displayText = $('#changeselect'+i)[0].style.display == 'none'
  54.                                         ? '' : 'none';
  55.                     displaySelect = $('#changeselect'+i)[0].style.display == 'none'
  56.                                         ? 'none' : '';
  57.                     nextDefaultVal = $("#inputFdefault"+i).val();
  58.                 }
  59.  
  60.                 //连接各个需要用到的td
  61.                 var tdList = ""
  62.                                         +"<td><input type='text' name='inputFtitle"+index+"' value='"+nextTitleVal+"' id='inputFtitle"+index+"'/></td>"
  63.                                           +"<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>"
  64.                                         +"<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>"
  65.                                         +"<td><input type='text' name='inputFdefault"+index+"' value='"+nextDefaultVal+"' id='inputFdefault"+index+"' size='10'/><span style='color:#CCCCCC;font-weight:normal'></span></td>"
  66.                                         +"<td><input type='text' name='inputFtip"+index+"' value='"+nextTxtVal+"' id='inputFtip"+index+"'/></td>"
  67.                                         +"";
  68.  
  69.                 return tdList;
  70.             }
  71.  
  72.         //此行用于模拟服务器提交获取的数据
  73.         if(window.location.search!="") {$('#submitform').append('<p>服务器接收到的表单信息为:<br/>'+window.location.search+"</p>");}
  74.  
  75.         //表单提交时的事件
  76.         $("#submitbtn").click(function(){
  77.             $("#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>");
  78.             return false;
  79.         });
  80.  
  81. })
  82.  
  83. </script>

HTML界面代码部分:

  1. <!--注意:为了兼容chrome浏览器对动态表格行的表单数据能正常提交到服务器端,<form>标签必须放置在<table>外围-->
  2. <form id="submitform" method="get" target="_blank">
  3. <table id="tab" border="1" width="60%" align="center" style="margin-top:20px" cellspacing="0" cellpadding="0">
  4.         <tr id='thead'>
  5.             <td nowrap="nowrap" width="40"><input type='checkbox' id='delckall' /></td>
  6.             <td nowrap="nowrap" width="80">序号</td>
  7.  
  8.             <!--////////////////动态部分的标题在这里书写-->
  9.             <td nowrap="nowrap" width="140">标题<span style='color:red;font-weight:normal'>*</span></td>
  10.             <td nowrap="nowrap" width="100">类型<span style='color:red;font-weight:normal'>*</span></td>
  11.             <td nowrap="nowrap" width="100">附加选值</td>
  12.             <td nowrap="nowrap" width="100">默认值</td>
  13.             <td nowrap="nowrap" width="140">输入提示</td>
  14.             <!--End ////////////////动态部分的标题在这里书写-->
  15.  
  16.             <td nowrap="nowrap" width="140">增删操作</td>
  17.             <td nowrap="nowrap" width="140">排序</td>
  18.        </tr>
  19.  
  20. <!--以下数据可以有,也可以没有,用于后端编辑:也作为行模板使用,如果一开始不需要这些数据,请删除这些行-->
  21.  
  22. <!--end 以下数据可以有,也可以没有,用于后端编辑-->
  23.  
  24.     </table>
  25. <input type="hidden" name="inputlen" value="0" id="inputlen"/>
  26. <div id="tbtoolbar" align="center">
  27. <span class="blocktip">说明：对于附加选值,请用<span style="color:#f80">|</span>号隔开多个值.对于多选框的默认值如果有多个请用<span style="color:#f80">|</span>号隔开</span>
  28. &nbsp;&nbsp;&nbsp;<input class="btnclass" type="button" id="but" value="增加一个"/>
  29.     &nbsp;&nbsp;&nbsp;<input class="btnclass" type="button" id="submitbtn" value="提交看行数"/>
  30.  
  31.     &nbsp;&nbsp;&nbsp;<input class="btnclass" type="button" id="delbtn" value="删除选定的行数"/>
  32. </div>
  33. </form>

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

  1. v-if案例解析（element-ui form-item 结合 v-if 动态生成rule规则\表单元素，表单无法验证问题剖析 ）

    fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...

  2. js动态的往表格中加入表单元素

    效果如图: 这里我用的是layui的静态表格,其他框架也是一样的(只要你都表单元素要通过js进行渲染),我的需求是在表单中放了表格的元素,表格中还有表单的元素.表格中的行数据是js动态添加的,正常的添 ...

  3. 动态增加表单元素并获取元素的text和value提交

    以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...

  4. JQuery实现表格动态增加行并对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...

  5. Vue电商后台管理系统项目第2天-首页添加表格动态渲染数据&分页

    0x01.使用Github学习的姿势 基于昨天的内容,今天的内容需要添加几个单文件组件,路由文件也需要做相应的增加,今天重点记录使用Element-UI中的表格组件实现数据动态渲染的实现流程和分页功能 ...

  6. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  7. 如何给动态添加的form表单控件添加表单验证

    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...

  8. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

  9. react将表格动态生成视频列表【代码】【案例】

    只需要创建一个表格,id为videos,react就能将这个表格转换成视频列表,并点击自动播放 index.html <!DOCTYPE html> <html> <he ...

随机推荐

  1. radio与checkbox

    最近一直在学习Javascript与asp.net MVC4,每天都在跟着书学习.这样总感觉自己看的很抽象,没有点实际的意义.而且,每次看的东西很容易忘记,所以打算在这里记录自己的学习笔记. Java ...

  2. Linux 08

    1按照视频里提出的几点要求完善使ls命令模仿windows下dir命令输出的脚本 {printf $6" "$7" \t";if (substr($1,1,1) ...

  3. Spring配置多数据源

    如何在应用启动之后灵活切换数据源的关键点: 将SessionFactory接口中的dataSource配置为AbstractRoutingDataSource的instance,sessionFact ...

  4. BZOJ 2780: [Spoj]8093 Sevenk Love Oimaster( 后缀数组 + 二分 + RMQ + 树状数组 )

    全部串起来做SA, 在按字典序排序的后缀中, 包含每个询问串必定是1段连续的区间, 对每个询问串s二分+RMQ求出包含s的区间. 然后就是求区间的不同的数的个数(经典问题), sort queries ...

  5. DBI && MySQL lock

    DBI: url set isolation to dirty read my $npmdb_dbh = DBI->connect("DBI:ODBC:npmdb", &qu ...

  6. 更改linux系统提示信息

    一个好的习惯会让人终生受益,当然我们做运维也是如此,比如我们在前期维护系统时修改或者删除掉/etc/issue /etc/issue.net这两个文件. 修改和删除的目的是屏蔽系统版本信息,这样是为了 ...

  7. sublime less高亮插件

    1.安装git bash 2.进入到sublime 的package目录下(Preference =>Browse packages) 3.运行gitbash,输入 git clone http ...

  8. 关于Git和Github

    英文原文:Ten Things You Didn't Know Git And GitHub Could Do Git 和 GitHub 都是非常强大的工具.即使你已经使用他们很长时间,你也很有可能不 ...

  9. JMX rmi的一些问题

    http://hi.baidu.com/84zhu/item/79bcd5de734f1318d68ed015 http://1985wanggang.blog.163.com/blog/static ...

  10. Keil MDK中使用pc-lint的详细方法

    keil MDK版本:V4.03 PC-lint版本:  V8.0 关于pc-lint的强大作用,网上有很多,这里不想再复述,只说一句:能通过pc-lint检验的程序不一定没有问题,但通过了pc-li ...