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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
深入理解vue Render函数
Jul 19 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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/02 国漫
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP中的float类型使用说明
2010/07/27 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
PHP反向代理类代码
2014/08/15 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Python程序慢的重要原因
2020/09/04 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
优秀志愿者事迹材料
2014/02/03 职场文书
校园活动宣传方案
2014/03/28 职场文书
爱国主义演讲稿
2014/05/07 职场文书
教师个人读书活动总结
2014/07/08 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
业务员辞职信范文
2015/03/02 职场文书
法院个人总结
2015/03/03 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android