首页 > 代码库 > 关于表格动态添加行并处理相关表单元素的一些修改----优化for重用(2)
关于表格动态添加行并处理相关表单元素的一些修改----优化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.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:
//接收参数来控制插件的行为(function($){$.tablejs = function(options,functionTDList) { if(typeof(options)!="object") {alert(‘xx‘);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="http://www.mamicode.com/images/newdot.png" width="16" border="0"/>‘, //鼠标移动上时的文字提示 newdotTitleMsg : options.newdotTitleMsg || ‘当前行为最新增加的行!‘, //del按钮 delhrefVisible : options.delhrefVisible || true, //删除链接是否可用 //删除链接的文字,也可以是图片<img/>标签 delhrefText : options.delhrefText || ‘<img src="http://www.mamicode.com/images/deltr.png" width="16" border="0"/>‘, //鼠标移动上时的文字提示 delhrefTitleMsg : options.delhrefTitleMsg || ‘点击删除当前行‘, //向上添加的标记是否可用 addprehrefVisible : options.addprehrefVisible || true, //向上添加的标记,可以是文字如"上增"或+↑等 addprehrefText : options.addprehrefText || ‘<img src="http://www.mamicode.com/images/addup.png" width="16" border="0"/>‘, //鼠标移动到向上添加标记时的文字提示 addprehrefTitleMsg : options.addprehrefTitleMsg || ‘向上添加一行‘, //向下添加的标记是否可用 addnexthrefVisible : options.addnexthrefVisible || true, //向下添加的标记,可以是文字如"下增"或+↓等 addnexthrefText : options.addnexthrefText || ‘<img src="http://www.mamicode.com/images/adddown.png" width="16" border="0"/>‘, //鼠标移动到向下添加标记时的文字提示 addnexthrefTitleMsg : options.addnexthrefTitleMsg || ‘向下添加一行‘, //上移是否可用 moveuphrefVisible : options.moveuphrefVisible || true, //上移的文字,可以是↓→↑←或"上移"等 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 || true, //下移的文字,可以是↓→↑←或"下移"等 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) { 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=http://www.mamicode.com/‘#‘ onclick=‘"+config.delFunName+"("+index+")‘ title=‘"+config.delhrefTitleMsg+"‘>"+config.delhrefText+"</a> <a href=http://www.mamicode.com/‘#‘ title=‘"+config.addprehrefTitleMsg+"‘ onclick=‘"+config.addFunName+"("+(index-1)+")‘>"+config.addprehrefText+"</a> <a href=http://www.mamicode.com/‘#‘ title=‘"+config.addnexthrefTitleMsg+"‘ onclick=‘"+config.addFunName+"("+index+")‘>"+config.addnexthrefText+"</a></td><td><a href=http://www.mamicode.com/‘#‘ id=‘"+config.moveuphrefIDPre+index+"‘ title=‘"+config.moveuphrefTitleMsg+"‘ onclick=‘moveup("+index+")‘>"+config.moveuphrefText+"</a> <a href=http://www.mamicode.com/‘#‘ id=‘"+config.movedownhrefIDPre+index+"‘ title=‘"+config.movedownhrefTitleMsg+"‘ onclick=‘moveup("+(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=http://www.mamicode.com/‘#/‘ id=‘"+config.moveuphrefIDPre+"$k$‘ title=‘"+config.moveuphrefTitleMsg+"‘ onclick=\‘moveup($k$)\‘>"+config.moveuphrefText+"</a>" var movedownHTML = "<a href=http://www.mamicode.com/‘#/‘ id=‘"+config.movedownhrefIDPre+"$k$‘ title=‘"+config.movedownhrefTitleMsg+"‘ onclick=\‘moveup($k+1$)\‘>"+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;‘ 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=http://www.mamicode.com/‘jquery170.js‘></script>"color: #000000;"> $(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=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/‘文本框‘"+inputFtypeCK1+">文本框</option><option value=http://www.mamicode.com/‘文本域‘"+inputFtypeCK2+">文本域</option><option value=http://www.mamicode.com/‘下拉框‘"+inputFtypeCK3+">下拉框</option><option value=http://www.mamicode.com/‘单选框‘"+inputFtypeCK4+">单选框</option><option value=http://www.mamicode.com/‘多选框‘"+inputFtypeCK5+">多选框</option><option value=http://www.mamicode.com/‘上传框‘"+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=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>" +""; 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个标题输入项 <a href=http://www.mamicode.com/‘#‘ 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> <input class="btnclass" type="button" id="but" value="增加一个"/> <input class="btnclass" type="button" id="submitbtn" value="提交看行数"/> <input class="btnclass" type="button" id="delbtn" value="删除选定的行数"/></div></form>
关于表格动态添加行并处理相关表单元素的一些修改----优化for重用(2)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。