js简单的表格添加行和删除行操作示例


Posted in Javascript onMarch 31, 2014
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
//创建一个html元素 
function $c(tagname){ 
return document.createElement(tagname); 
} 
//文档加载完成后要执行的内容 
$(document).ready(function(){ 
//绑定添加行按钮的单击事件 
$("#addrow").bind("click",function(){ 
// 取得table 
var tab = $("#tab"); 
// 创建tr元素 
var tr = $c("tr"); 
// 为table追加tr元素 
tab.append(tr); 
// 创建td元素 
var td1=$c("td"); 
// td元素的内容 
td1.innerHTML="insert1"; 
// 为新追加的tr追加td元素 
tr.appendChild(td1); 
var td2=$c("td"); 
td2.innerHTML="insert2"; 
tr.appendChild(td2); 
}); 
// 绑定删除行按钮的单击事件 
$("#deleterow").bind("click",function(){ 
// 取得table的第一行 
var tab = $("#tab tr:eq(0)"); 
// 删除此行 
tab.remove(); 
}); 
}); 
</script> 
</head> 
<body> 
<table border='1' id="tab"> 
<tr> 
<td>123</td> 
<td>456</td> 
</tr> 
</table> 
</br> 
<button id="addrow">添加行</button> 
<button id="deleterow">删除行</button> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript Accessor实现说明
Dec 06 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
javascript实现密码强度显示
Mar 18 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
jQuery中选择器小问题(新人难免遇到)
Mar 31 #Javascript
jquery控制display属性为none或block
Mar 31 #Javascript
js原型继承的两种方法对比介绍
Mar 30 #Javascript
详解JavaScript中undefined与null的区别
Mar 29 #Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 #Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 #Javascript
javascript修改IMG标签的src问题
Mar 28 #Javascript
You might like
source.php查看源文件
2006/12/09 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
php实现的mongodb操作类
2015/05/28 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php加密解密字符串示例
2016/10/13 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
js解决movebox移动问题
2016/03/29 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python sys.argv[]用法实例详解
2018/05/25 Python
jupyter notebook 多行输出实例
2020/04/09 Python
python如何求100以内的素数
2020/05/27 Python
python 数据类型强制转换的总结
2021/01/25 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
什么是会话Bean
2015/05/14 面试题
2014年庆元旦活动方案
2014/02/15 职场文书
秋冬农业生产标语
2014/10/09 职场文书
天气温馨提示语
2015/07/14 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
python xlwt模块的使用解析
2021/04/13 Python
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL