@OverWrite BlogJava

BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合

:: 管理 ::

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開源項目大全

搜索

閱讀排行榜

評論排行榜

帶有添加刪除行功能的表格（ajax/javascript/js實現）

應用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);

//為每個表格的每個添加行按鈕關聯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');

//最優為表格排序

mark_index(table[0].id);

});

//為每個表格的每個刪除行按鈕關聯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并執行匿名函數

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{

//已經有序號了，只需更新

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

if(this.rowIndex != 0)

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

});

}

});

}

</script>

/**

*dom文檔裝載完畢時執行

*/

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

<thead>

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

</thead>

<tbody>

</toboby>

</table>