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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
Node.js实现数据推送
Apr 14 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 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中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
关于this和self的使用说明
2010/08/01 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
js自定义回调函数
2015/12/13 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
python socket 超时设置 errno 10054
2014/07/01 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
中职生求职信
2014/07/01 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
员工离职通知函
2015/04/25 职场文书
离职证明范本
2015/06/12 职场文书
绿里奇迹观后感
2015/06/15 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
5道关于python基础 while循环练习题
2021/11/27 Python