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转换农历类实现及调用方法
Jan 27 Javascript
JS定时器实例
Apr 17 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
JS数组去重详情
Nov 07 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
mysql5详细安装教程
2007/01/15 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
浅谈PHP的反射机制
2016/12/15 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
使用js 设置url参数
2013/07/08 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
详解jQuery选择器
2016/12/21 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
总经理助理的八要求
2013/11/12 职场文书
村级换届选举方案
2014/05/10 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
春节晚会开场白
2015/05/29 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS