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 相关文章推荐
jQuery 中国省市两级联动选择附图
May 14 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
webpack打包多页面的方法
Nov 30 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
js调用网络摄像头的方法
Dec 05 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
测试您的 PHP 水平的题目
2007/05/30 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
JS Timing
2007/04/21 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
一道python走迷宫算法题
2018/01/22 Python
python 实现A*算法的示例代码
2018/08/13 Python
python实现换位加密算法的示例
2018/10/14 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
求职信的七个关键技巧
2014/02/05 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
入党介绍人意见2015
2015/06/01 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书