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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
jQuery select操作控制方法小结
May 26 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
jquery队列函数用法实例
Dec 16 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
JavaScript实现网页留言板功能
Nov 23 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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调用数据库的存贮过程!
2006/10/09 PHP
PHP中读写文件实现代码
2011/10/20 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python数据操作方法封装类实例
2017/06/23 Python
Django内容增加富文本功能的实例
2017/10/17 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
班队活动设计方案
2014/01/30 职场文书
效能风暴心得体会
2014/09/04 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
Golang表示枚举类型的详细讲解
2021/09/04 Golang
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电