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 相关文章推荐
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
destoon二次开发入门示例
2014/06/20 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
nginx下安装php7+php5
2016/07/31 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
php实现映射操作实例详解
2019/10/02 PHP
jquery一般方法介绍 入门参考
2011/06/21 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
python开发之文件操作用法实例
2015/11/13 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
python FTP编程基础入门
2021/02/27 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
自我评价范文分享
2014/01/04 职场文书
英文留学推荐信范文
2014/01/25 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
2014年体育工作总结
2014/11/24 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server