广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

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

    2018-04-09 07:41:21 次阅读 稿源:互联网
    零七广告
    <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>

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告