JavaScript获取表格(table)当前行的值、删除行、增加行_javascript技巧

<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
, 表格
, table
, 删除行
, 增加行
当前行的值
javascript获取当前行、javascript 当前时间、javascript 当前日期、javascript技巧、javascript 当前url,以便于您获取更多的相关知识。

时间: 2024-07-29 00:33:24

JavaScript获取表格(table)当前行的值、删除行、增加行_javascript技巧的相关文章

js获取表格的行数和列数的方法_javascript技巧

如何使用JavaScript获取一个表格的行数和列数?其实很简单,假设存在如下表格: <table width="100%" border="1" cellspacing="0" cellpadding="0" id="example_table"> <tr> <td> </td> <td> </td> <td> </

JavaScript设置、获取、清除单值和多值cookie的方法_javascript技巧

废话不多说了,直接给大家贴代码了. 具体代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值cookie this.get = function(name) { var start = document.cookie.indexOf(encodeURIComponent(name)) ; var end = document.cookie.indexOf(';', start) ; if(end == -

JS获取表格内指定单元格html内容的方法_javascript技巧

本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组,然后定位指定的单元格,通过单元格的innerHTML属性获得单元格的html内容 <!DOCTYPE html> <html> <head> <script> function cell() { var x=document.getElementById('myTable').rows[0].cells;

Javascript 获取链接(url)参数的方法[正则与截取字符串]_javascript技巧

当然,我们也可以用正则直接匹配,文章中也给出了一个正则的例子. 分解链接的方式: 复制代码 代码如下: <script type="text/javascript"> <!-- // 说明:Javascript 获取链接(url)参数的方法 function getQueryString(name) { // 如果链接没有参数,或者链接中不存在我们要获取的参数,直接返回空 if(location.href.indexOf("?")==-1 || l

javascript获取网页各种高宽及位置的方法总结_javascript技巧

screen对象 获取屏幕的高宽(分辨率) screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值 screen.availHeight //屏幕可用高度 屏幕的像素宽度减去系统部件宽度之后的值 window对象 获得窗口位置及大小 window.screenTop //窗口顶部距屏幕顶部的距离 window.screenLeft //窗口左侧距屏幕左侧的距离 window.i

js获取html的span标签的值方法(超简单)_javascript技巧

HTML中代码为: <span id="testid">aaaa</span> 获取的js代码: 方法一:.innerText var x1 = document.getElementById("testid").innerText; alert("x1="+x1); 方法二:.innerHTML var x2 = document.getElementById("testid").innerHTML;

JavaScript返回当前会话cookie全部键值对照的方法_javascript技巧

本文实例讲述了JavaScript返回当前会话cookie全部键值对照的方法.分享给大家供大家参考.具体如下: 下面的JS代码输出全部的cookie键值对照 <!DOCTYPE html> <html> <body> Cookies associated with this document: <script> document.write(document.cookie); </script> </body> </html&g

Javascript获取图片原始宽度和高度的方法详解_javascript技巧

前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法. 如下: <img id="img" src="1.jpg"> <script type="text/javascript"> var img

Javascript获取数组中的最大值和最小值的方法汇总_javascript技巧

比较数组中数值的大小是比较常见的操作,比较大小的方法有多种,比如可以使用自带的sort()函数,下面来介绍如下几种方法,代码如下: 方法一: //最小值 Array.prototype.min = function() { var min = this[0]; var len = this.length; for (var i = 1; i < len; i++){ if (this[i] < min){ min = this[i]; } } return min; } //最大值 Array