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一些不错的函数脚本代码
Sep 10 Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
Node.js实现断点续传
Jun 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
python实现的简单文本类游戏实例
2015/04/28 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python何时应该使用Lambda函数
2019/07/02 Python
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
公司行政经理岗位职责
2013/12/24 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
勇敢的心观后感
2015/06/09 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
Pillow图像处理库安装及使用
2022/04/12 Python