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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 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读取文件内容到数组的方法
2015/03/16 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
Python字符转换
2008/09/06 Python
Python中zfill()方法的使用教程
2015/05/20 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
tensorflow获取变量维度信息
2018/03/10 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Python输出指定字符串的方法
2020/02/06 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
数控技术专业推荐信
2013/11/01 职场文书
三方合作协议书范本
2014/04/18 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
民间个人借款协议书
2014/09/30 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
党员学习型组织心得体会
2019/06/21 职场文书