亚洲AV永久无码精品,亚洲免费网站在线观看,亚洲AV无码专区在线亚

帶有添加刪除行功能的表格（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>

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

新用戶注冊刷新評論列表


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




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

@OverWrite BlogJava

常用鏈接

留言簿(3)

隨筆分類

隨筆檔案

友情鏈接

搜索

最新評論

閱讀排行榜

評論排行榜