新增按鈕所在表格列,若後台需要用到表單的欄位資料,且是透過ajax方式局部更新的話,就需要用到 serialize function 收集表單輸入欄位的資訊。
view plain
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>