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 相关文章推荐
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JS继承实现方法及优缺点详解
Sep 02 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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程序
2006/10/09 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
python机器学习之神经网络(三)
2017/12/20 Python
python模糊图片过滤的方法
2018/12/14 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
Python中zip函数如何使用
2020/06/04 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
2014年材料员工作总结
2014/11/19 职场文书
档案管理员岗位职责
2015/02/12 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
利用python做表格数据处理
2021/04/13 Python
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript