table对象中的insertRow与deleteRow使用示例


Posted in Javascript onJanuary 26, 2014
<!DOCTYPE html> 
<html> 
<head> 
<title>table1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<script language = "javascript" type = "text/javascript"> 
<!-- 
function test1(){ 
//判断插入的编号是否已经存在 
for(var i=0;i<mytable.rows.length;i++){ 
var eachRow = mytable.rows[i]; 
if(eachRow.cells[0].innerText == no.value){ 
window.alert("编号已经存在!"); 
return ; 
} 
} 
//获取表单中的数据 
var newTableRow = mytable.insertRow(mytable.rows.length); 
newTableRow.insertCell(0).innerText = no.value; 
newTableRow.insertCell(1).innerText = name1.value; 
newTableRow.insertCell(2).innerText = nickName.value; 
} 
function test2(){ 
mytable.deleteRow(mytable.rows.length-1); 
} 
//--> 
</script> 
</head> 
<body> 
<h1>英雄排行榜</h1> 
<table id = "mytable" border = "1"> 
<tr><td>排名</td><td>姓名</td><td>外号</td></tr> 
<tr><td>1</td><td>宋江</td><td>及时雨</td></tr> 
<tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr> 
</table> 
<h1>请输入新的好汉</h1> 
编号<input id = "no" type = "text" value = ""><br/> 
名字<input id = "name1" type = "text" value = ""><br/> 
外号<input id = "nickName" type = "text" value = ""><br/> 
<input id = "tianjia" type = "button" value = "添加" onclick = "test1()"> 
<input type = "button" value = "删除最后一行" onclick = "test2()"/> 
</body> 
</html>

table对象中的insertRow与deleteRow使用示例 
Javascript 相关文章推荐
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
购物车选中得到价格实现示例
Jan 26 #Javascript
动态添加option及createElement使用示例
Jan 26 #Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 #Javascript
js中创建对象的几种方式示例介绍
Jan 26 #Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 #Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 #Javascript
JS对象转换为Jquery对象示例
Jan 26 #Javascript
You might like
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
浅析JavaScript中的类型和对象
2013/11/29 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
数控技术应届生求职信
2013/11/13 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
计划生育证明书写要求
2014/09/17 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2014年宣传工作总结
2014/11/18 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
护士2015年终工作总结
2015/04/29 职场文书
工作态度不好检讨书
2015/05/06 职场文书
离职证明格式样本
2015/06/12 职场文书