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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 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
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
PHP与以太坊交互详解
2018/08/24 PHP
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
初学python数组的处理代码
2011/01/04 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
python os.fork() 循环输出方法
2019/08/08 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
制作部班长职位说明书
2014/02/26 职场文书
餐饮投资计划书
2014/04/25 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
安全施工责任书
2014/08/25 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
新闻通讯稿模板
2015/07/22 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python