源碼參照修改自網(wǎng)上,主要的修改如下:

1.處理了動(dòng)態(tài)行與表單的設(shè)值問(wèn)題
2.添加了行的向上或向下排序
3.添加了可以在當(dāng)前行的下邊或上邊增加新行的功能
4.添加了可以單選或勾選多項(xiàng)刪除不需要的行的功能
5.添加了新增的行的高亮(以new紅標(biāo)記標(biāo)注)的功能
6.實(shí)現(xiàn)了可以不依靠樣式表(即:即使不要<style></style>部分,功能不會(huì)一點(diǎn))
7.實(shí)現(xiàn)了方便后端的接收的數(shù)據(jù)形式(通過(guò)一個(gè)動(dòng)態(tài)的長(zhǎng)度設(shè)置,后端獲取這個(gè)動(dòng)態(tài)長(zhǎng)度并且從1開始循環(huán)即可接收相關(guān)數(shù)據(jù))
8.實(shí)現(xiàn)了方便后端進(jìn)行編輯時(shí)的界面(即添加與編輯的頁(yè)面的js代碼部分完全不用更改!)

注意:本文中的代碼存在很多冗余,已經(jīng)進(jìn)行了修改.修改后的地址:　　

???? http://www.cnblogs.com/dreamyoung/p/4064479.html

效果圖如下:????????????????? ?預(yù)覽效果?? (有css樣式)

???????????????????????????? ? 預(yù)覽效果?? (無(wú)css樣式)

其它效果圖:

?

?

好了.放上代碼,代碼只有三個(gè)部分(HTML部分,JS部分,CSS部分,其中CSS部分可省略)

HTML部分:

<!--注意:為了兼容chrome瀏覽器對(duì)動(dòng)態(tài)表格行的表單數(shù)據(jù)能正常提交到服務(wù)器端,<form>標(biāo)簽必須放置在<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">序號(hào)</td><td nowrap="nowrap" width="140">標(biāo)題<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">默認(rèn)值</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">說(shuō)明：對(duì)于附加選值,請(qǐng)用<span style="color:#f80">|</span>號(hào)隔開多個(gè)值.對(duì)于多選框的默認(rèn)值如果有多個(gè)請(qǐng)用<span style="color:#f80">|</span>號(hào)隔開</span><input class="btnclass" type="button" id="but" value="增加一個(gè)"/><input class="btnclass" type="button" id="submitbtn" value="提交看行數(shù)"/><input class="btnclass" type="button" id="delbtn" value="刪除選定的行數(shù)"/></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:red; font-size:12px;display:none;position:absolute;top:-8px; right:0px;'>new</div></div></td>"+"<td><input type='text' name='inputFtitle"+index+"' id='inputFtitle"+index+"' value='標(biāo)題"+Math.floor(Math.random()*(10000000-1000000)+1000000)+"'/></td>"+"<td><select οnchange='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'>暫無(wú)</span></div><div id='changeselect"+index+"' style='display:none;'><input type='text' name='inputFselect"+index+"' id='inputFselect"+index+"' size='20' /><span style='color:red;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=\'#\' οnclick=\'deltr("+index+")\'>刪除</a>&nbsp;&nbsp;<a href=\'#\' οnclick=\'addnexttr("+index+")\'>下增</a>&nbsp;&nbsp;<a href=\'#\' οnclick=\'addnexttr("+(index-1)+")\'>上增</a></td><td><a href=\'#\' οnclick=\'moveup("+index+")\' id='moveup_"+index+"'>向上</a>&nbsp;&nbsp;<a id='movedown_"+index+"' href=\'#\' οnclick=\'moveup("+(index+1)+")\'>向下</a></td>"+"</tr>";return tr;}//此行用于模擬服務(wù)器提交獲取的數(shù)據(jù)if(window.location.search!="") {$('#submitform').append('<p>服務(wù)器接收到的表單信息為:<br/>'+window.location.search+"</p>");}//表單提交時(shí)的事件$("#submitbtn").click(function(){$("#submitform").append('<br/>輸入的行數(shù)為:'+$("#inputlen").val()+",即inputLen="+$("#inputlen").val()+"<br/>您可以在服務(wù)器端通過(guò)循環(huán)由1到inputLen獲取表單數(shù)據(jù),比如inputFtitle[inputLen]即為第inputLen個(gè)標(biāo)題輸入項(xiàng)&nbsp;&nbsp;&nbsp;&nbsp; <a href='#' οnclick='document.getElementById(\"submitform\").submit();'>查看提交的表單數(shù)據(jù)</a>");return false;});//全選反選處理var allchecked = false;$("#delckall").click(function(){allchecked = !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設(shè)置,方便重用//設(shè)置所有的<tr/>居中$(tablejquery+" tr").attr("align","center");//用于限制向上向下時(shí)的超界問(wèn)題var moveupHTML = "<a href=\'#\' οnclick=\'moveup($k$)\' id='moveup_$k$'>向上</a>"var movedownHTML = "<a id='movedown_$k$' href=\'#\' οnclick=\'moveup($k+1$)\'>向下</a>"//設(shè)置鏈接無(wú)效,供添加刪除等調(diào)用disableHref = function() {var trlen = $(tablejquery+' tr').length;$(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)));}//單獨(dú)設(shè)置限定項(xiàng)if(k==1){$('#moveup_'+k).replaceWith("<span style='font-weight:lighter;color:#CCC;font-size:12px;' id='moveup_"+k+"'>向上</span>");}if(k+1==trlen) {$('#movedown_'+k).replaceWith("<span style='font-weight:lighter;color:#CCC;font-size:12px;' id='movedown_"+k+"'>向下</span>");}});}//在尾部新增加一項(xiàng)<tr/>$("#but").click(function(){//隱藏new效果 $('.newdot').hide();var _len = $(tablejquery+" tr").length; $(tablejquery).append(newtrtemp(_len)); //設(shè)置新增項(xiàng)有new效果$('#new_'+_len).show();//設(shè)置服務(wù)器的獲取長(zhǎng)度$('#inputlen').val($(tablejquery+" tr").length-1);//向上及向下的界限處理 disableHref();return false;}) // 將第i行的內(nèi)容設(shè)置到第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被替換沒(méi)掉了//獲取當(dāng)前項(xiàng)的表單值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();//將當(dāng)前項(xiàng)(包括表單項(xiàng)值等)設(shè)置到第j項(xiàng)項(xiàng)$("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:red; font-size:12px;display:none;position:absolute;top:-8px; right:0px;'>new</div></div></td>"+"<td><input type='text' name='inputFtitle"+j+"' value='"+nextTitleVal+"' id='inputFtitle"+j+"'/></td>"+"<td><select οnchange='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'>暫無(wú)</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:red;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=\'#\' οnclick=\'deltr("+j+")\'>刪除</a>&nbsp;&nbsp;<a href=\'#\' οnclick=\'addnexttr("+j+")\'>下增</a>&nbsp;&nbsp;<a href=\'#\' οnclick=\'addnexttr("+(j-1)+")\'>上增</a></td><td><a href=\'#\' οnclick=\'moveup("+j+")\' id='moveup_"+j+"'>向上</a>&nbsp;&nbsp;<a id='movedown_"+j+"' href=\'#\' οnclick=\'moveup("+(j+1)+")\'>向下</a></td>"+"</tr>"); }//刪除指定索引的<tr/>項(xiàng)deltr =function(index){var _len = $(tablejquery+" tr").length;//刪除當(dāng)前行$("tr[id='"+index+"']").remove();//new效果檢測(cè)var hasnewdotID = 0//當(dāng)前刪除項(xiàng)的后面部分執(zhí)行向上替換for(var i = index+1,j=_len;i<j;i++){//用于檢索并獲取之前的new效果項(xiàng)if(hasnewdotID==0) {hasnewdotID = $('#new_'+i)[0].style.display != 'none' ? i : 0;}//將當(dāng)前行設(shè)置到上一行(當(dāng)前行不保留)MoveTr(i,i-1);}//如果檢索到哪個(gè)new效果項(xiàng),設(shè)置到新的項(xiàng)去(新項(xiàng)為減1) if(hasnewdotID != 0) {$('#new_'+(hasnewdotID-1)).show();}//設(shè)置服務(wù)器的獲取長(zhǎng)度$('#inputlen').val($(tablejquery+" tr").length-1);//向上及向下的界限處理 disableHref();return false;}//向上移動(dòng)或向下移動(dòng)moveup = function(index) {var _len = $(tablejquery+" tr").length;//有disableHref(); 向上及向下的界限處理后,此下兩行可注釋,否則開啟//if(index==1) {alert('第一條無(wú)法向上');return false;}//if(index==_len) {alert('最后條無(wú)法向下');return false;}//新增一行$(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;}//將當(dāng)前行的內(nèi)容設(shè)置到新增行,保留當(dāng)前行MoveTr(index,_len,true);//將上行的內(nèi)容設(shè)置到當(dāng)前行,保留上行MoveTr(index-1,index,true);//將新增行內(nèi)容設(shè)置到上行內(nèi)容MoveTr(_len,index-1,true);//刪除新增行var tr=$("tr[id=\'"+_len+"\']")[0];var table=tr.parentNode; table.removeChild(tr);//如果檢索到哪個(gè)new效果項(xiàng),設(shè)置到新的項(xiàng)去if(hasnewdotID!=0) {if(hasnewdotID == index) {$('#new_'+(hasnewdotID-1)).show();}else{$('#new_'+index).show();}}//設(shè)置服務(wù)器的獲取長(zhǎng)度$('#inputlen').val($(tablejquery+" tr").length-1);//向上及向下的界限處理 disableHref();return false; }//下增一行<tr/> 或上增一行addnexttr =function(index){var _len = $(tablejquery+" tr").length;$('.newdot').hide();//新增一行 $(tablejquery).append(newtrtemp(_len)); //循環(huán):從當(dāng)前索引的 [下行的下行]到 [新增的項(xiàng)],行內(nèi)容從循環(huán)當(dāng)前項(xiàng)的"上行"獲得for(var i=_len,j=index+2; i>=j;i--){ //將上行的內(nèi)容設(shè)置到當(dāng)前行并保留上行MoveTr(i-1,i,true);} //還原新增行$("tr[id=\'"+(index+1)+"\']").replaceWith(newtrtemp(index + 1))//新增行new效果$('#new_'+(index + 1)).show();//設(shè)置服務(wù)器的獲取長(zhǎng)度$('#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].value ;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:

<!--樣式表全部刪除只會(huì)影響美觀,不會(huì)造成功能丟失--> <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 {/*對(duì)所有被設(shè)置為position:relative的單元格會(huì)造成雙重邊,所以不應(yīng)該在td上應(yīng)該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>

?

轉(zhuǎn)載于:https://www.cnblogs.com/dreamyoung/p/4063347.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的关于表格动态添加行并处理相关表单元素的一些修改的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。