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计算页面执行时间的函数
Dec 07 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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
一个程序下载的管理程序(四)
2006/10/09 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
Python入门教程之运算符与控制流
2016/08/17 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Python实现分数序列求和
2020/02/25 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
pandas apply多线程实现代码
2020/08/17 Python
房地产还款计划书
2014/01/10 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
争做文明公民倡议书
2014/08/29 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
TV动画《间谍过家家》公开PV
2022/03/20 日漫