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 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
Openlayers实现距离面积测量
Sep 28 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
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
js类型检查实现代码
2010/10/29 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
ipython和python区别详解
2019/06/26 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
python3.8下载及安装步骤详解
2020/01/15 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
产品工艺师的岗位职责
2013/11/15 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
体育教学随笔感言
2014/02/24 职场文书
化学教育专业自荐信
2014/07/04 职场文书
2014年生产部工作总结
2014/12/17 职场文书
幼师个人总结范文
2015/02/28 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python