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 相关文章推荐
js下用层来实现select的title提示属性
Feb 23 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
对javascript继承的理解
Oct 11 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
javascript数据类型详解
Feb 07 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
理解JavaScript原型链
2016/10/25 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
python求素数示例分享
2014/02/16 Python
centos系统升级python 2.7.3
2014/07/03 Python
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python基础之入门必看操作
2017/07/26 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
python pymysql库的常用操作
2020/10/16 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
开会迟到检讨书
2014/01/08 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
2019年工作总结范文
2019/05/21 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers