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 相关文章推荐
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
javascript实现五星评分功能
Nov 10 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 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 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
浅析Ajax语法
2016/12/05 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python使用append合并两个数组的方法
2015/04/28 Python
详解Django中Request对象的相关用法
2015/07/17 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
大专生自荐信
2013/10/04 职场文书
班级聚会策划书
2014/01/16 职场文书
搞笑结婚保证书
2015/05/08 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
Elasticsearch 配置详解
2022/04/19 Java/Android
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js