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 相关文章推荐
js自执行函数的几种不同写法的比较
Aug 16 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
vue组件入门知识全梳理
Sep 21 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Django学习笔记之为Model添加Action
2019/04/30 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
大学生个人学习总结
2015/02/15 职场文书
单位综合评价意见
2015/06/05 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
如何使用vue3打造一个物料库
2021/05/08 Vue.js
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers