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 相关文章推荐
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
canvas绘制的直线动画
Jan 23 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
jQuery实现计算器功能
Oct 19 jQuery
js定时器出现第一次延迟的原因及解决方法
Jan 04 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 $_ENV为空的原因分析
2009/06/01 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
python抖音表白程序源代码
2019/04/07 Python
python基于property()函数定义属性
2020/01/22 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
PyTorch中的C++扩展实现
2020/04/02 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
人民教师的自我评价分享
2014/02/21 职场文书
学生自我评语大全
2014/04/18 职场文书
高中班级口号
2014/06/09 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
物业管理专业自荐信
2014/07/01 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
纪录片信仰观后感
2015/06/08 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
Nginx实现会话保持的两种方式
2022/03/18 Servers