jquery实现html动态表并提交,jQuery动态操作表单示例【基于table表格】

本文实例讲述了jQuery动态操作表单。分享给大家供大家参考，具体如下：

jquery表格操作

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;

}

序号

步骤名称

步骤描述

相关操作 添加

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(

"

" +

"

" + max_line_num + "" +

"

" +

"

" +

"

" +

"上移 " +

"下移 " +

"删除 " +

"

" +

"

");

}

//删除选择记录

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 = "";

$('#content tr').each(function () {

data += "";

var stepName = $(this).find("td:eq(1)").find("input").val();

var stepDescription = $(this).find("td:eq(2)").find("input").val();

data += " " + stepName + "";

data += " " + stepDescription + "";

data += "";

});

data += "";

alert(data);

}

使用本站在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行上述代码可得到如下运行效果：

希望本文所述对大家jQuery程序设计有所帮助。