EvoTalk

Posts Tagged ‘JQuery

03 四月, 2009

JQuery Add Table Row and Serialize Example

Posted by: asd In: Web

新增按鈕所在表格列,若後台需要用到表單的欄位資料,且是透過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>

Tags:

在表格中動態新增一個 row

view plain

HTML:

</span>

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&gt;

&lt;html xmlns=http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

&lt;style type="text/css"&gt;

.current-row

{

background-color: Maroon;

}

&lt;/style&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

&lt;title&gt;Add a new row&lt;/title&gt;

&lt;script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"&gt;

&lt;script type="text/javascript"&gt;

function add() {

// Get the current row

var lastRow = $('#tb1 tr:last');

var number = parseInt($("td:first", lastRow)[0].innerHTML);

number++;

var newRow = lastRow.clone();

$("td:first", newRow).html(number);

$('#tb1').append(newRow);

// Clear the content of the last table cell

//$("td:last", newRow).html("");

return false;

}

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;input type="button" value="+" onclick="add();"&gt;

&lt;table border="1" class="style11" [...]

Tags: