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 硬盘序列号+其它硬件信息
Dec 23 Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 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 进程锁定问题分析研究
2009/11/24 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
js输出列表实现代码
2010/09/12 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
利用python实现数据分析
2017/01/11 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
Django中提示消息messages的设置方式
2019/11/15 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
Linux文件系统类型
2012/02/15 面试题
推普周活动总结
2014/08/28 职场文书
个人授权委托书样本
2014/09/13 职场文书
领导干部作风建设总结
2014/10/23 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS