新增按鈕所在表格列,若後台需要用到表單的欄位資料,且是透過ajax方式局部更新的話,就需要用到 serialize function 收集表單輸入欄位的資訊。
HTML:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
-
<HTML>
-
-
<HEAD>
-
-
<TITLE> Test JQuery add table row and serial </TITLE>
-
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
-
-
<script type="text/javascript">
-
-
$(document).ready(function() {
-
$('#serial').click(function() {
-
var str = $("form").serialize();
-
alert(str);
-
return false;
-
});
-
});
-
-
function addrow(elem)
-
{
-
var tr = $(elem).parent().parent();
-
var table = $(elem).parents("table:first");
-
var newRow = tr.clone();
-
tr.after(newRow);
-
return false;
-
}
-
-
</script>
-
</HEAD>
-
<BODY>
-
<form action="form_action.aspx" method="post">
-
<table>
-
<tr>
-
<td><input type="submit" value="+" onclick="return addrow(this);"/> First name: <input type="text" name="fname" /><br /></td>
-
-
</tr>
-
-
</table>
-
-
<input type="submit" id="serial"/>
-
-
</form>
-
-
</HTML>
Tags: JQuery