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中Object和Function的关系小结
Sep 26 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
layui table 参数设置方法
Aug 14 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 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 ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
Python  连接字符串(join %)
2008/09/06 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python实现简易云音乐播放器
2018/01/04 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
学习Python爬虫的几点建议
2020/08/05 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
结婚典礼证婚词
2014/01/08 职场文书
车辆安全检查制度
2014/01/12 职场文书
2014政务公开实施方案
2014/02/19 职场文书
开展读书活动总结
2014/06/30 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
python自动化八大定位元素讲解
2021/07/09 Python
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏