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:void(0)的真正含义实例分析
Aug 20 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python可变参数函数用法实例
2015/07/07 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
python之文件读取一行一行的方法
2018/07/12 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python pygame实现球球大作战
2019/11/25 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
销售类个人求职信范文
2013/09/25 职场文书
学年自我鉴定范文
2013/10/01 职场文书
科级干部培训心得体会
2016/01/06 职场文书
初中语文教学反思范文
2016/03/03 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书