jquery動態表格，動態添加表格行

時間 2019-12-13

標籤 jquery 動態表格添加欄目 JQuery 简体版

原文原文鏈接

轉載收藏於：https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.htmljavascript

效果圖：

Html：
<html>

<head>

<title>jquery表格操做</title>

table

{

border: black solid 1px;

border-collapse: collapse;

}

{

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>

步驟名稱

</td>

步驟描述

</td>

相關操做 <a href="#" onclick="add_line();">添加</a>

</td>

</tr>

</table>

</table>

</body>

</html>

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。