带有添加删除行功能的表格（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 阅读(3998) 评论(0) 编辑收藏所属分类: Ajax/html

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: ajax级联菜单实例 Yahoo本周发表研发一年的Yahoo!BrowserPlus预览版使用Dojo的痛苦经历(转载) jQeury中获取dom元素的几种方式-$(selector)、$()示例 jQuery对象与dom对象的区别 Ajax.Request详解-prototype相关带有添加删除行功能的表格（ajax/javascript/js实现） jQuery源码分析-构造函数详解 jQuery js框架简介 jQuery源码详解（转）

@OverWrite BlogJava

常用链接

留言簿(3)

随笔分类

随笔档案

友情链接

搜索

最新评论

阅读排行榜

评论排行榜