本文实例讲述了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();
