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 强制类型转换函数
May 17 Javascript
优化javascript的执行速度
Jan 23 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
vue3.0 上手体验
Sep 21 Javascript
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
php开发环境配置记录
2011/01/14 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Django之form组件自动校验数据实现
2020/01/14 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
商务助理岗位职责
2013/11/13 职场文书
检讨书范文500字
2015/01/28 职场文书
西柏坡导游词
2015/02/05 职场文书
档案工作个人总结
2015/03/03 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
python游戏开发之pygame实现接球小游戏
2022/04/22 Python