本文實(shí)例講述了jQuery動態(tài)操作表單。分享給大家供大家參考，具體如下：
<html><head> <title>jquery表格操作</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> table { border: black solid 1px; border-collapse: collapse; } td { border: black solid 1px; padding: 3px; } .td_Num { width: 60px; text-align: center; } .td_Item { width: 160px; text-align: center; } .td_Oper { width: 120px; text-align: center; } .td_Oper span { cursor: pointer; } </style></head><body> <table> <tr> <td class='td_Num'> 序號 </td> <td class='td_Item'> 步驟名稱 </td> <td class='td_Item'> 步驟描述 </td> <td class='td_Oper'> 相關(guān)操作 <a href="#" rel="external nofollow" onclick="add_line();">添加</a> </td> </tr> </table> <table id="content"> </table> <input type="button" value="提交數(shù)據(jù)" id="btnSubmit" onclick="SaveData()" /></body></html><script type="text/javascript"> var currentStep = 0; var max_line_num = 0; //添加新記錄 function add_line() { max_line_num = $("#content tr:last-child").children("td").html(); if (max_line_num == null) { max_line_num = 1; } else { max_line_num = parseInt(max_line_num); max_line_num += 1; } $('#content').append( "<tr id='line" + max_line_num + "'>" + "<td class='td_Num'>" + max_line_num + "</td>" + "<td class='td_Item'><input type='text' class='stepName' value='步驟名稱" + max_line_num + "'></input></td>" + "<td class='td_Item'><input type='text' class='stepDescription' value='步驟描述" + max_line_num + "'></td>" + "<td class='td_Oper'>" + "<span onclick='up_exchange_line(this);'>上移</span> " + "<span onclick='down_exchange_line(this);'>下移</span> " + "<span onclick='remove_line(this);'>刪除</span> " + "</td>" + "</tr>"); } //刪除選擇記錄 function remove_line(index) { if (index != null) { currentStep = $(index).parent().parent().find("td:first-child").html(); } if (currentStep == 0) { alert('請選擇一項(xiàng)!'); return false; } if (confirm("確定要?jiǎng)h除改記錄嗎？")) { $("#content tr").each(function () { var seq = parseInt($(this).children("td").html()); if (seq == currentStep) { $(this).remove(); } if (seq > currentStep) { $(this).children("td").each(function (i) { if (i == 0) $(this).html(seq - 1); }); } }); } } //上移 function up_exchange_line(index) { if (index != null) { currentStep = $(index).parent().parent().find("td:first-child").html(); } if (currentStep == 0) { alert('請選擇一項(xiàng)!'); return false; } if (currentStep <= 1) { alert('已經(jīng)是最頂項(xiàng)了!'); return false; } var upStep = currentStep - 1; //修改序號 $('#line' + upStep + " td:first-child").html(currentStep); $('#line' + currentStep + " td:first-child").html(upStep); //取得兩行的內(nèi)容 var upContent = $('#line' + upStep).html(); var currentContent = $('#line' + currentStep).html(); $('#line' + upStep).html(currentContent); //交換當(dāng)前行與上一行內(nèi)容 $('#line' + currentStep).html(upContent); $('#content tr').each(function () { $(this).css("background-color", "#ffffff"); }); $('#line' + upStep).css("background-color", "yellow"); event.stopPropagation(); //阻止事件冒泡 } //下移 function down_exchange_line(index) { if (index != null) { currentStep = $(index).parent().parent().find("td:first-child").html(); } if (currentStep == 0) { alert('請選擇一項(xiàng)!'); return false; } if (currentStep >= max_line_num) { alert('已經(jīng)是最后一項(xiàng)了!'); return false; } var nextStep = parseInt(currentStep) + 1; //修改序號 $('#line' + nextStep + " td:first-child").html(currentStep); $('#line' + currentStep + " td:first-child").html(nextStep); //取得兩行的內(nèi)容 var nextContent = $('#line' + nextStep).html(); var currentContent = $('#line' + currentStep).html(); //交換當(dāng)前行與上一行內(nèi)容 $('#line' + nextStep).html(currentContent); $('#line' + currentStep).html(nextContent); $('#content tr').each(function () { $(this).css("background-color", "#ffffff"); }); $('#line' + nextStep).css("background-color", "yellow"); event.stopPropagation(); //阻止事件冒泡 } //保存數(shù)據(jù) function SaveData() { var data = "<root>"; $('#content tr').each(function () { data += "<item>"; var stepName = $(this).find("td:eq(1)").find("input").val(); var stepDescription = $(this).find("td:eq(2)").find("input").val(); data += " <stepName>" + stepName + "</stepName>"; data += " <stepDescription>" + stepDescription + "</stepDescription>"; data += "<item>"; }); data += "</root>"; alert(data); }</script>使用本站在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.VeVB.COm/code/HtmlJsRun，測試運(yùn)行上述代碼可得到如下運(yùn)行效果：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery操作xml技巧總結(jié)》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
