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 相关文章推荐
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 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/04 欧美动漫
PHP 数组遍历顺序理解
2009/09/09 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
python进程管理工具supervisor使用实例
2014/09/17 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
使用django实现一个代码发布系统
2019/07/18 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
公益广告宣传方案
2014/02/28 职场文书
宣传口号大全
2014/06/16 职场文书
校外活动方案
2014/08/28 职场文书
自我检讨报告
2015/01/28 职场文书
参观邀请函范文
2015/02/02 职场文书