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 原型模式实现OOP的再研究
Apr 09 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
js显示文本框提示文字的方法
May 07 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
JS实现多物体运动的方法详解
Jan 23 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
python实现ftp客户端示例分享
2014/02/17 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
用pycharm开发django项目示例代码
2019/06/13 Python
python字符串查找函数的用法详解
2019/07/08 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
SQL Server笔试题
2012/01/10 面试题
技术副厂长岗位职责
2013/12/26 职场文书
高一英语教学反思
2014/01/22 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
党员自我评价2015
2015/03/03 职场文书
2016年教代会开幕词
2016/03/04 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
微信小程序实现聊天室功能
2021/06/14 Javascript
使用Python解决图表与画布的间距问题
2022/04/11 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android