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 操作XML入门
Dec 25 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
javascript中this的四种用法
May 11 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
使用rollup打包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
PHP的中问验证码
2006/11/25 PHP
php SQL Injection with MySQL
2011/02/27 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
简约控的天堂:The Undone
2016/12/21 全球购物
大学生军训自我评价分享
2013/11/09 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
2014年教师节寄语
2014/08/11 职场文书
最美护士演讲稿
2014/08/27 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2014年医生工作总结
2014/11/21 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android