@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)
给我留言
查看公开留言
查看私人留言
随笔分类
Ajax/html(17)
(rss)
IT新闻(10)
(rss)
Java(20)
(rss)
Php(1)
(rss)
心情(7)
(rss)
旅游风景(1)
(rss)
系统相关(4)
(rss)
设计模式(1)
(rss)
随笔档案
2012年8月 (1)
2012年7月 (1)
2008年7月 (1)
2008年6月 (7)
2008年5月 (1)
2008年4月 (3)
2008年3月 (8)
2008年2月 (10)
2008年1月 (15)
2007年12月 (3)
2005年11月 (3)
2005年10月 (2)
友情链接
dojo圈子-JAVAEYE
Java开源项目大全
搜索
最新评论
1. re: jQuery源码详解(转)
是
--是
2. re: 利用google侦测网站漏洞工具Goolag Scanner
貌似翻了墙也进不去呃……
--REZ
3. re: jQuery源码详解(转)
不错
--阿道夫
4. re: jQuery源码详解(转)
dsad
--ss
5. re: 使用Dojo的痛苦经历(转载)[未登录]
@zhzg
那你要自己试试。
--evan
阅读排行榜
1. 如何调整eclipse字体大小(43754)
2. 一个不错的log4j.properties例子(28658)
3. getMethod()和invoke()方法应用(22306)
4. Dojo入门教程 Dojo Quick Start(12667)
5. 轻松搭建resin开发平台--Resin配置详解(11052)
评论排行榜
1. 利用google侦测网站漏洞工具Goolag Scanner(7)
2. ajax级联菜单实例(5)
3. Dojo入门教程 Dojo Quick Start(4)
4. jQuery源码详解(转)(4)
5. 童丽版 经典老歌-月满西楼(2)
带有添加删除行功能的表格(ajax/javascript/js实现)
应用jquery,制作一个可以自动添加删除行的表格,演示地址
http://www.vesung.cn/demo/table.html
下面是完整的代码:
<
html
>
<
head
>
<
title
>
带有添加删除行功能的表格
</
title
>
<
script
type
="text/javascript"
src
="../js/jquery-1.2.1.pack.js"
></
script
>
<
script
type
="text/javascript"
>
//
为每个表格添加“添加”,“删除”行的按钮
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('
&
nbsp;').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
>
<
script
type
="text/javascript"
>
/**/
/*
*
*dom文档装载完毕时执行
*/
$(document).ready(
function
()
{
mark_index();
//
这里自动执行2个动作:1.为每个表格添加序号
add_bt();
//
2.在每个表格前添加 添加,删除行的按钮
}
);
</
script
>
</
head
>
<
body
>
<
table
id
='t1'
cellSpacing
=0
cellPadding
=0
border
=1
>
<
thead
>
<
tr
><
th
>
name
</
th
><
th
>
email
</
th
><
th
>
nishen
</
th
></
tr
>
</
thead
>
<
tbody
>
<
tr
><
td
>
1
</
td
><
td
>
56
</
td
><
td
>
</
td
></
tr
>
<
tr
><
td
>
1
</
td
><
td
>
ds
</
td
><
td
>
</
td
></
tr
>
<
tr
><
td
>
4
</
td
><
td
>
43
</
td
><
td
>
</
td
></
tr
>
<
tr
><
td
>
5
</
td
><
td
>
2
</
td
><
td
>
</
td
></
tr
>
<
tr
><
td
>
4
</
td
><
td
>
g
</
td
><
td
>
</
td
></
tr
>
</
toboby
>
</
table
>
<
br
><
br
>
<
table
id
='t2'
cellSpacing
=0
cellPadding
=0
border
=1
>
<
thead
>
<
tr
><
th
>
name
</
th
><
th
>
email
</
th
><
th
>
nishen
</
th
></
tr
>
</
thead
>
<
tbody
>
<
tr
><
td
>
</
td
><
td
>
</
td
><
td
>
</
td
></
tr
>
<
tr
><
td
>
</
td
><
td
>
</
td
><
td
>
</
td
></
tr
>
<
tr
><
td
>
</
td
><
td
>
</
td
><
td
>
</
td
></
tr
>
<
tr
><
td
>
</
td
><
td
>
</
td
><
td
>
</
td
></
tr
>
<
tr
><
td
>
</
td
><
td
>
</
td
><
td
>
</
td
></
tr
>
</
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源码详解(转)
Powered by:
BlogJava
Copyright © vesung