@OverWrite BlogJava

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

:: 管理 ::

128 隨筆 :: 0 文章 :: 29 評(píng)論 :: 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開源項(xiàng)目大全

搜索

閱讀排行榜

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

<html>

<head>

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

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

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

//為每個(gè)表格的每個(gè)添加行按鈕關(guān)聯(lián)click動(dòng)作

//以每個(gè)表格的最后一個(gè)tr元素為模板復(fù)制并append到表格內(nèi)

$('.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);

});

//為每個(gè)表格的每個(gè)刪除行按鈕關(guān)聯(lián)click動(dòng)作

$('.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);

}

});

}

//為每個(gè)表格添加序號(hào)

function mark_index(table_id){

//定義序號(hào)的名稱

var indexName = '序號(hào)';

//獲得tables對(duì)象，如果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();

//添加序號(hào)列

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)有序號(hào)了，只需更新

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

if(this.rowIndex != 0)

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

});

}

});

}

</script>

/**

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

*/

$(document).ready(function(){

mark_index();//這里自動(dòng)執(zhí)行2個(gè)動(dòng)作：1.為每個(gè)表格添加序號(hào)

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

});

</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 閱讀(4012) 評(píng)論(0) 編輯收藏所屬分類: Ajax/html

新用戶注冊(cè) 刷新評(píng)論列表


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




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