JQuery动态给table添加、删除行 改进版


Posted in Javascript onJanuary 19, 2011
<html> 
<head> 
<title> 
</title> 
<script src="js/jquery-1.4.2_min.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
var row_count = 0; 
function addNew() 
{ 
var table1 = $('#table1'); 
var firstTr = table1.find('tbody>tr:first'); 
var row = $("<tr></tr>"); 
var td = $("<td></td>"); 
td.append($("<input type='checkbox' name='count' value='New'><b>CheckBox"+row_count+"</b>") 
); 
row.append(td); 
table1.append(row); 
row_count++; 
} 
function del() 
{ 
var checked = $("input[type='checkbox'][name='count']"); 
$(checked).each(function(){ 
if($(this).attr("checked")==true) //注意:此处判断不能用$(this).attr("checked")==‘true'来判断。 
{ 
$(this).parent().parent().remove(); 
} 
}); 
} 
</script> 
</head> 
<body> 
<input type="button" value="Add" onclick="addNew();"> 
<input type="button" value="Delete" onclick="del();"> 
<div id="rightcontent"> 
<table id="table1" cellspacing="3" cellpadding="3" border="1"> 
<tbody> 
<tr> 
<th> 
Add new row,then test the delete function. 
</th> 
</tr> 
</tbody> 
</table> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 #Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 #Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 #Javascript
Jquery插件 easyUI属性汇总
Jan 19 #Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 #Javascript
Javascript调用C#代码
Jan 17 #Javascript
js的写法基础分析
Jan 17 #Javascript
You might like
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
javascript 写类方式之四
2009/07/05 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
从零学Python之hello world
2014/05/21 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
会计专业应届生求职信
2013/11/24 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
捐书活动倡议书
2015/04/27 职场文书
婚育证明格式
2015/06/17 职场文书
致运动员赞词
2015/07/22 职场文书
python基础之模块的导入
2021/10/24 Python
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL