@OverWrite BlogJava

BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合

:: 管理 ::

128 隨筆 :: 0 文章 :: 29 評論 :: 0 Trackbacks

<

2008年2月

>

日

一

二

三

四

五

六

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

1

2

3

4

5

6

7

8

常用鏈接

留言簿(3)

隨筆分類

隨筆檔案

友情鏈接

dojo圈子-JAVAEYE
Java開源項目大全

搜索

閱讀排行榜

應用jquery，制作一個可以自動添加刪除行的表格，演示地址 http://www.vesung.cn/demo/table.html
下面是完整的代碼:

<html>

<head>

<title>帶有添加刪除行功能的表格</title>

//為每個表格添加“添加”，“刪除”行的按鈕

function add_bt(){

//添加行按鈕定義

var bt_add = $("<input class='bt_add' type='button' value='add'/>");

//刪除行按鈕定義

var bt_del = $("<input class='bt_del' type='button' value='del'/>");

//插入按鈕

$('table').before(bt_del).before(' ').before(bt_add);

//為每個表格的每個添加行按鈕關聯(lián)click動作

//以每個表格的最后一個tr元素為模板復制并append到表格內

$('.bt_add').click(function(){

//this指按鈕元素

var last_tr = $(this).next('table').find('tr:last');

last_tr.after('<tr>'+last_tr.html()+'</tr>');

var table = $(this).next('table');

//最優(yōu)為表格排序

mark_index(table[0].id);

});

//為每個表格的每個刪除行按鈕關聯(lián)click動作

$('.bt_del').click(function(){

var last_tr = $(this).next().next('table').find('tr:last');

var index = last_tr[0].rowIndex;

if(last_tr[0].rowIndex>0){

last_tr.remove();

var table = $(this).next().next('table');

mark_index(table[0].id);

}

});

}

//為每個表格添加序號

function mark_index(table_id){

//定義序號的名稱

var indexName = '序號';

//獲得tables對象，如果table_id不為空，則返回指定的table元素，否則放回全部table元素集合

var tables = typeof table_id == "string"?$('#'+table_id):$('table');

//遍歷tables并執(zhí)行匿名函數(shù)

tables.each(function(){

var xuhao = $(this).find('tr:first').find('th:first').text();

//添加序號列

if(xuhao != indexName){

$(this).find('tr').each(function(){

if(this.rowIndex == 0)

$(this.firstChild).before('<th align=center>'+indexName+'</th>');

else

$(this.firstChild).before('<td align=center>'+this.rowIndex+'</td>');

});

}else{

//已經(jīng)有序號了，只需更新

$(this).find('tr').each(function(){

if(this.rowIndex != 0)

$(this.firstChild).text(this.rowIndex);

});

}

});

}

</script>

/**

*dom文檔裝載完畢時執(zhí)行

*/

$(document).ready(function(){

mark_index();//這里自動執(zhí)行2個動作：1.為每個表格添加序號

add_bt(); //2.在每個表格前添加添加，刪除行的按鈕

});

</script>

</head>

<body>

<thead>

<tr><th>name</th><th>email</th><th>nishen</th></tr>

</thead>

<tbody>

</toboby>

</table>

<thead>

<tr><th>name</th><th>email</th><th>nishen</th></tr>

</thead>

<tbody>

</toboby>

</table>

</body>

</html>

posted on 2008-02-22 14:45 vesung 閱讀(4006) 評論(0) 編輯收藏所屬分類: Ajax/html

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: ajax級聯(lián)菜單實例 Yahoo本周發(fā)表研發(fā)一年的Yahoo!BrowserPlus預覽版使用Dojo的痛苦經(jīng)歷(轉載) jQeury中獲取dom元素的幾種方式-$(selector)、$()示例 jQuery對象與dom對象的區(qū)別 Ajax.Request詳解-prototype相關帶有添加刪除行功能的表格（ajax/javascript/js實現(xiàn)） jQuery源碼分析-構造函數(shù)詳解 jQuery js框架簡介 jQuery源碼詳解（轉）