溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹使用jQuery怎么動態操作表單，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
具體如下：
<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'>
相關操作 <a href="#" rel="external nofollow" onclick="add_line();">添加</a>
</td>
</tr>
</table>
<table id="content">
</table>
<input type="button" value="提交數據" 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('請選擇一項!');
return false;
}
if (confirm("確定要刪除改記錄嗎？")) {
$("#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('請選擇一項!');
return false;
}
if (currentStep <= 1) {
alert('已經是最頂項了!');
return false;
}
var upStep = currentStep - 1;
//修改序號
$('#line' + upStep + " td:first-child").html(currentStep);
$('#line' + currentStep + " td:first-child").html(upStep);
//取得兩行的內容
var upContent = $('#line' + upStep).html();
var currentContent = $('#line' + currentStep).html();
$('#line' + upStep).html(currentContent);
//交換當前行與上一行內容
$('#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('請選擇一項!');
return false;
}
if (currentStep >= max_line_num) {
alert('已經是最后一項了!');
return false;
}
var nextStep = parseInt(currentStep) + 1;
//修改序號
$('#line' + nextStep + " td:first-child").html(currentStep);
$('#line' + currentStep + " td:first-child").html(nextStep);
//取得兩行的內容
var nextContent = $('#line' + nextStep).html();
var currentContent = $('#line' + currentStep).html();
//交換當前行與上一行內容
$('#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(); //阻止事件冒泡
}
//保存數據
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>關于使用jQuery怎么動態操作表單就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
