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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
layer扩展打开/关闭动画的方法
Sep 23 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 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
用header 发送cookie的php代码
2007/03/16 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
Python yield 使用浅析
2015/05/28 Python
Django 限制访问频率的思路详解
2019/12/24 Python
python实现随机加减法生成器
2020/02/24 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
互动出版网:专业书籍
2017/03/21 全球购物
自荐信的基本格式
2014/02/22 职场文书
王老吉广告词
2014/03/20 职场文书
百日安全活动总结
2014/05/04 职场文书
企业员工薪酬方案
2014/06/04 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
Java 在线考试云平台的实现
2021/11/23 Java/Android
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android