JavaScript获取表格(table)当前行的值、删除行、增加行


Posted in Javascript onJuly 03, 2015
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Js获取 table当前行的值</title>
<script language=javascript>
	var selectedTr = null;
	function c1(obj) {
		obj.style.backgroundColor = 'blue'; //把点到的那一行变希望的颜色; 
		if (selectedTr != null)
			selectedTr.style.removeAttribute("backgroundColor");
		if (selectedTr == obj)
			selectedTr = null;//加上此句,以控制点击变白,再点击反灰 
		else
			selectedTr = obj;
	}
	/*得到选中行的第一列的值*/
	function check() {
		if (selectedTr != null) {
			var str = selectedTr.cells[0].childNodes[0].value;
			document.getElementById("lab").innerHTML = str;
		} else {
			alert("请选择一行");
		}
	}
	/*删除选中行*/
	function del() {
		if (selectedTr != null) {
			if (confirm("确定要删除吗?")) {
				alert(selectedTr.cells[0].childNodes[0].value);
				var tbody = selectedTr.parentNode;
				tbody.removeChild(selectedTr);
			}
		} else {
			alert("请选择一行");
		}
	}
</script>
</head>
<body>
	单击选中Tr,高亮显示,再单击取消选选中。
	<input type=button value="选中的是哪一行?" onclick="check()">
	<input type=button value="删除选中行" onclick="del()">
	<input type=button value="增加一行" onclick="add()">
	<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
		<tr onclick="c1(this);" bgcolor="#cccccc">
			<td><input type="text" value="11"></td>
			<td><input type="text" value="12"></td>
		</tr>
		<tr onclick="c1(this);" bgcolor="#e0e0e0">
			<td><input type="text" value="21"></td>
			<td><input type="text" value="22"></td>
		</tr>
		<tr onclick="c1(this);" bgcolor="#cccccc">
			<td><input type="text" value="31"></td>
			<td><input type="text" value="32"></td>
		</tr>
		<tr onclick="c1(this);" bgcolor="#e0e0e0">
			<td><input type="text" value="41"></td>
			<td><input type="text" value="42"></td>
		</tr>
		<tr onclick="c1(this);" bgcolor="#cccccc">
			<td><input type="text" value="51"></td>
			<td><input type="text" value="52"></td>
		</tr>
	</table>
	<label id="lab"></label>
</body>
</html>
Javascript 相关文章推荐
node.js入门教程
Jun 01 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
jquery实现页面加载效果
Feb 21 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
jQuery中 delegate使用的问题
Jul 03 #Javascript
JavaScript实现select添加option
Jul 03 #Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 #Javascript
Javascript中的作用域和上下文深入理解
Jul 03 #Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 #Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 #Javascript
一张Web前端的思维导图分享
Jul 03 #Javascript
You might like
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
js中有关IE版本检测
2012/01/04 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python中的lambda表达式用法详解
2016/06/22 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
八年级历史教学反思
2014/01/10 职场文书
销售冠军获奖感言
2014/02/03 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
班主任班级寄语大全
2014/04/04 职场文书
司机岗位职责说明书
2014/07/29 职场文书
投资入股协议书
2016/03/22 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
Redis入门教程详解
2021/08/30 Redis
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python