html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

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>

Hh2HTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助