（责任编辑：）
友情链接:联系人：QQ关于表格动态添加行并处理相关表单元素的一些修改
源码参照修改自网上,主要的修改如下:1.处理了动态行与表单的设值问题2.添加了行的向上或向下排序3.添加了可以在当前行的下边或上边增加新行的功能4.添加了可以单选或勾选多项删除不需要的行的功能5.添加了新增的行的高亮(以new红标记标注)的功能6.实现了可以不依靠样式表(即:即使不要&style&&/style&部分,功能不会一点)7.实现了方便后端的接收的数据形式(通过一个动态的长度设置,后端获取这个动态长度并且从1开始循环即可接收相关数据)8.实现了方便后端进行编辑时的界面(即添加与编辑的页面的js代码部分完全不用更改!) 注意:本文中的代码存在很多冗余,已经进行了修改.修改后的地址: &&&& /dreamyoung/p/4064479.html效果图如下:&&&&&&&&&&&&&&&&& &预览效果&& (有css样式)&&&&&&&&&&&&&&&&&&&&&&&&&&&& & 预览效果&& (无css样式)其它效果图:&&好了.放上代码,代码只有三个部分(HTML部分,JS部分,CSS部分,其中CSS部分可省略)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:font-weight:normal'&*&/span&&/td&&td nowrap="nowrap" width="100"&类型&span style='color: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="140"&操作&/td&&td nowrap="nowrap" width="140"&排序&/td&&/tr&&/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&JS部分:&script src='jquery.js'&&/script&&script&$(document).ready(function(){newtrtemp = function(index) {var tr = "&tr id="+index+" align='center'&"+"&td&&input type='checkbox' id='delck_"+index+"' /&&/td&&td nowrap='nowrap'&&div class='countnum' style='position:relative'&"+index+"&div class='newdot' id='new_"+index+"' style='color: font-size:12display:position:top:-8 right:0'&new&/div&&/div&&/td&"+"&td&&input type='text' name='inputFtitle"+index+"' id='inputFtitle"+index+"' value='标题"+Math.floor(Math.random()*(0)+"'/&&/td&"+"&td&&select onchange='changeBH(this);' name='inputFtype"+index+"' id='inputFtype"+index+"'&&option value='文本框' selected='selected'&文本框&/option&&option value='文本域'&文本域&/option&&option value='下拉框'&下拉框&/option&&option value='单选框'&单选框&/option&&option value='多选框'&多选框&/option&&option value='上传框'&上传框&/option&&/select&&/td&"+"&td nowrap='nowrap'&&div id='changetext"+index+"' style='display:'&&span style='color:#CCCCCC;font-weight:normal'&暂无&/span&&/div&&div id='changeselect"+index+"' style='display:'&&input type='text' name='inputFselect"+index+"' id='inputFselect"+index+"' size='20' /&&span style='color:font-weight:normal'&*&/span&&/div&&/td&"+"&td&&input type='text' name='inputFdefault"+index+"' id='inputFdefault"+index+"' size='10'/&&span style='color:#CCCCCC;font-weight:normal'&&/span&&/td&"+"&td&&input type='text' name='inputFtip"+index+"' id='inputFtip"+index+"' /&&/td&"+"&td nowrap='nowrap'&&a href=\'#\' onclick=\'deltr("+index+")\'&删除&/a&&&&a href=\'#\' onclick=\'addnexttr("+index+")\'&下增&/a&&&&a href=\'#\' onclick=\'addnexttr("+(index-1)+")\'&上增&/a&&/td&&td&&a href=\'#\' onclick=\'moveup("+index+")\' id='moveup_"+index+"'&向上&/a&&&&a id='movedown_"+index+"' href=\'#\' onclick=\'moveup("+(index+1)+")\'&向下&/a&&/td&"+"&/tr&";return}//此行用于模拟服务器提交获取的数据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='#' onclick='document.getElementById(\"submitform\").submit();'&查看提交的表单数据&/a&");return false;});//全选反选处理var allchecked = false;$("#delckall").click(function(){allchecked = !for(var i=$("#inputlen").val()-0 ;i&=1; i--) {$("#delck_"+i)[0].checked = (!allchecked) ? false : 'checked';}});//批量删除处理$("#delbtn").click(function(){for(var i=$("#inputlen").val()-0 ;i&=1; i--) {if($("#delck_"+i)[0].checked) {var delsometr = function(index) {deltr(index);}delsometr(i); //删除单行 }}return false;});var tablejquery = '#tab' //&table&的id设置,方便重用//设置所有的&tr/&居中$(tablejquery+" tr").attr("align","center");//用于限制向上向下时的超界问题var moveupHTML = "&a href=\'#\' onclick=\'moveup($k$)\' id='moveup_$k$'&向上&/a&"var movedownHTML = "&a id='movedown_$k$' href=\'#\' onclick=\'moveup($k+1$)\'&向下&/a&"//设置链接无效,供添加删除等调用disableHref = function() {var trlen = $(tablejquery+' tr').$(tablejquery+' tr').each(function(k,v) {//将所有的样式及限制还原if(k&0 && k& trlen) {$('#moveup_'+k).replaceWith(moveupHTML.replace("$k$",k).replace("$k$",k));$('#movedown_'+k).replaceWith(movedownHTML.replace("$k$",k).replace("$k+1$",(k+1)));}//单独设置限定项if(k==1){$('#moveup_'+k).replaceWith("&span style='font-weight:color:#CCC;font-size:12' id='moveup_"+k+"'&向上&/span&");}if(k+1==trlen) {$('#movedown_'+k).replaceWith("&span style='font-weight:color:#CCC;font-size:12' id='movedown_"+k+"'&向下&/span&");}});}//在尾部新增加一项&tr/&$("#but").click(function(){//隐藏new效果 $('.newdot').hide();var _len = $(tablejquery+" tr").$(tablejquery).append(newtrtemp(_len));//设置新增项有new效果$('#new_'+_len).show();//设置服务器的获取长度$('#inputlen').val($(tablejquery+" tr").length-1);//向上及向下的界限处理 disableHref();return false;})// 将第i行的内容设置到第j行.即tr(id=i).replaceWith(tr(id=j))var MoveTr = function(fromIndex,toIndex,keep) {var i = fromIvar j = toIvar k = keep //是否保留原先的tr,如果keep=false,则原tr被替换没掉了//获取当前项的表单值var nextTxtVal = $("#inputFtip"+i).val();var nextTitleVal = $("#inputFtitle"+i).val();var nextSelectVal = $("#inputFselect"+i).val();var inputFtypeCK1 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '文本框' ? '': ' selected=\""+selected+"\"';var inputFtypeCK2 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '文本域' ? '': ' selected=\""+selected+"\"';var inputFtypeCK3 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '下拉框' ? '': ' selected=\""+selected+"\"';var inputFtypeCK4 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '单选框' ? '': ' selected=\""+selected+"\"';var inputFtypeCK5 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '多选框' ? '': ' selected=\""+selected+"\"';var inputFtypeCK6 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '上传框' ? '': ' selected=\""+selected+"\"';var displayText = $('#changeselect'+i)[0].style.display == 'none' ? '' : 'none';var displaySelect = $('#changeselect'+i)[0].style.display == 'none' ? 'none' : '';var nextDefaultVal = $("#inputFdefault"+i).val();//将当前项(包括表单项值等)设置到第j项项$("tr[id=\'"+(k? j : i)+"\']").replaceWith("&tr id="+j+" align='center'&"+"&td&&input type='checkbox' id='delck_"+j+"' /&&/td&&td nowrap='nowrap'&&div class='countnum' style='position:relative'&"+j+"&div class='newdot' id='new_"+j+"' style='color: font-size:12display:position:top:-8 right:0'&new&/div&&/div&&/td&"+"&td&&input type='text' name='inputFtitle"+j+"' value='"+nextTitleVal+"' id='inputFtitle"+j+"'/&&/td&"+"&td&&select onchange='changeBH(this);' name='inputFtype"+j+"' id='inputFtype"+j+"'&&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"+j+"' style='display:"+displayText+"'&&span style='color:#CCCCCC;font-weight:normal'&暂无&/span&&/div&&div id='changeselect"+j+"' style='display:"+displaySelect+"'&&input type='text' name='inputFselect"+j+"' value='"+nextSelectVal+"' id='inputFselect"+j+"' size='20'/&&span style='color:font-weight:normal'&*&/span&&/div&&/td&"+"&td&&input type='text' name='inputFdefault"+j+"' value='"+nextDefaultVal+"' id='inputFdefault"+j+"' size='10'/&&span style='color:#CCCCCC;font-weight:normal'&&/span&&/td&"+"&td&&input type='text' name='inputFtip"+j+"' value='"+nextTxtVal+"' id='inputFtip"+j+"'/&&/td&"+"&td nowrap='nowrap'&&a href=\'#\' onclick=\'deltr("+j+")\'&删除&/a&&&&a href=\'#\' onclick=\'addnexttr("+j+")\'&下增&/a&&&&a href=\'#\' onclick=\'addnexttr("+(j-1)+")\'&上增&/a&&/td&&td&&a href=\'#\' onclick=\'moveup("+j+")\' id='moveup_"+j+"'&向上&/a&&&&a id='movedown_"+j+"' href=\'#\' onclick=\'moveup("+(j+1)+")\'&向下&/a&&/td&"+"&/tr&");}//删除指定索引的&tr/&项deltr =function(index){var _len = $(tablejquery+" tr").//删除当前行$("tr[id='"+index+"']").remove();//new效果检测var hasnewdotID = 0//当前删除项的后面部分执行向上替换for(var i = index+1,j=_i&j;i++){//用于检索并获取之前的new效果项if(hasnewdotID==0) {hasnewdotID = $('#new_'+i)[0].style.display != 'none' ? i : 0;}//将当前行设置到上一行(当前行不保留)MoveTr(i,i-1);}//如果检索到哪个new效果项,设置到新的项去(新项为减1) if(hasnewdotID != 0) {$('#new_'+(hasnewdotID-1)).show();}//设置服务器的获取长度$('#inputlen').val($(tablejquery+" tr").length-1);//向上及向下的界限处理 disableHref();return false;}//向上移动或向下移动moveup = function(index) {var _len = $(tablejquery+" tr").//有disableHref(); 向上及向下的界限处理后,此下两行可注释,否则开启//if(index==1) {alert('第一条无法向上');}//if(index==_len) {alert('最后条无法向下');}//新增一行$(tablejquery).append("&tr id='"+_len+"' align='center'&&td colspan='9'&&/td&&/tr&");//检索之前的new效果var hasnewdotID = 0hasnewdotID = $('#new_'+index)[0].style.display != 'none' ? index : 0;if(hasnewdotID==0) {hasnewdotID = $('#new_'+(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.parentNtable.removeChild(tr);//如果检索到哪个new效果项,设置到新的项去if(hasnewdotID!=0) {if(hasnewdotID == index) {$('#new_'+(hasnewdotID-1)).show();}else{$('#new_'+index).show();}}//设置服务器的获取长度$('#inputlen').val($(tablejquery+" tr").length-1);//向上及向下的界限处理 disableHref();return false;}//下增一行&tr/& 或上增一行addnexttr =function(index){var _len = $(tablejquery+" tr").$('.newdot').hide();//新增一行 $(tablejquery).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效果$('#new_'+(index + 1)).show();//设置服务器的获取长度$('#inputlen').val($(tablejquery+" tr").length-1);//向上及向下的界限处理 disableHref();return false;}changeBH = function(ele) {var i = ele.name.toString().replace('inputFtype','');var v = ele.options[ele.selectedIndex].if(v == '单选框' || v == '下拉框' || v == '多选框') {document.getElementById('changetext'+i).style.display = 'none';document.getElementById('changeselect'+i).style.display = '';}else{document.getElementById('changetext'+i).style.display = '';document.getElementById('changeselect'+i).style.display = 'none';}}})&/script&然后就是可以省略只影响美观不影响功能的CSS:&!--样式表全部删除只会影响美观,不会造成功能丢失--&&style type="text/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;}&/style&&
分享给朋友：
您可能感兴趣的文章：
随机阅读：}