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 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
js对象的复制继承实例
Jan 10 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
消息持续发送的完整例子
2006/10/09 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
js Flash插入函数免激活代码
2009/03/31 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python函数的周期性执行实现方法
2016/08/13 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
几个人围成一圈的问题
2013/09/26 面试题
政府门卫岗位职责
2014/04/29 职场文书
团结就是力量演讲稿
2014/05/21 职场文书