jquery實現表單逐條登記，一次性提交功能
表單form的提交，大多數都是填寫一條記錄，就提交一次，這樣就會頻繁操作持久層，如果我們想一次性填寫多條記錄，然後再一次性提交給持久層，這樣的功能你可以實現嗎？下面就是這樣的一個小案例。
<!DOCTYPEHTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript" src="js/jquery-1.3.1.js"></script>
<title>添加用戶</title>
</head>
<body>
<center>
<br><br>
添加用戶:<br><br>
姓名: <input type="text"name="name" id="name" />
email:<input type="text" name="email" id="email"/>
電話: <input type="text"name="tel" id="tel" /><br><br>
<buttonid="addUser">提交</button>
<br><br>
<hr>
<br><br>
<tableid="usertable" border="1" cellpadding="5"cellspacing=0>
<tbody>
<tr>
<th>姓名</th>
<th>email</th>
<th>電話</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><ahref="deleteEmp?id=Tom">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><ahref="deleteEmp?id=Jerry">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
<scriptlanguage="JavaScript">
$(document).ready(function(){
//綁定事件onclick
$('#addUser').click(function(){
//一步到位
varin_user_name=$('#name').val();
varin_user_email=$('#email').val();
varin_user_tel=$('#tel').val();
//一步到位，沒有辦法動態綁定事件，換一個.
/* $tr=$("<tr><td>"+$in_user_name
+"</td><td>"+$in_user_email+"</td><td>"+$in_user_tel
+"</td><td><ahref='#'>刪除</a></td></tr>");*/
$tr=$("<tr></tr>");
$name_td=$("<td></td>");
$name_td.text(in_user_name);//"<td>名字</td>"
$email_td=$("<td></td>");
$email_td.text(in_user_email);//"<td>電郵</td>"
$tel_td=$("<td></td>");
$tel_td.text(in_user_tel);//"<td>電話</td>"
$a_td=$("<td></td>");
$myHref=$("<a></a>");
$myHref.text("刪除");
$myHref.attr("href","delEmpController.php?name="+in_user_name);
$a_td.append($myHref);
$tr.append($name_td);
$tr.append($email_td);
$tr.append($tel_td);
$tr.append($a_td);
//超鏈接還沒有綁定點擊事件??.
$myHref.click(function(){
//如何顯示用戶名字，並且讓用戶選擇是否真的刪除用戶
//<ahref='delEmpController.php?name=xiaoxiao'>刪除</a>
varb=window.confirm($(this).parent().parent().children().eq(0).text());
if(b){
$(this).parent().parent().remove();
returnfalse;
}else{
returnfalse;
}
})
$('#usertabletbody').append($tr);
});
})
</script>
</html>