快捷導(dǎo)航

JavaScript獲取表格（table）當(dāng)前行的值、刪除行、增加行

更新時(shí)間：2015年07月03日 10:25:46 投稿：junjie

這篇文章主要介紹了JavaScript獲取表格（table）當(dāng)前行的值、刪除行、增加行,本文直接給出代碼示例,需要的朋友可以參考下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Js獲取 table當(dāng)前行的值</title>
<script language=javascript>
	var selectedTr = null;
	function c1(obj) {
		obj.style.backgroundColor = 'blue'; //把點(diǎn)到的那一行變希望的顏色; 
		if (selectedTr != null)
			selectedTr.style.removeAttribute("backgroundColor");
		if (selectedTr == obj)
			selectedTr = null;//加上此句，以控制點(diǎn)擊變白，再點(diǎn)擊反灰 
		else
			selectedTr = obj;
	}
	/*得到選中行的第一列的值*/
	function check() {
		if (selectedTr != null) {
			var str = selectedTr.cells[0].childNodes[0].value;
			document.getElementById("lab").innerHTML = str;
		} else {
			alert("請(qǐng)選擇一行");
		}
	}
	/*刪除選中行*/
	function del() {
		if (selectedTr != null) {
			if (confirm("確定要?jiǎng)h除嗎?")) {
				alert(selectedTr.cells[0].childNodes[0].value);
				var tbody = selectedTr.parentNode;
				tbody.removeChild(selectedTr);
			}
		} else {
			alert("請(qǐng)選擇一行");
		}
	}
</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>

您可能感興趣的文章:

相關(guān)文章

全面解析js中的原型,原型對(duì)象,原型鏈
這篇文章主要介紹了圖解js中的原型,原型對(duì)象,原型鏈,幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2021-01-01
JavaScript編寫一個(gè)簡(jiǎn)易購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了JavaScript簡(jiǎn)易購(gòu)物車功能的編寫代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
JavaScript基于自定義函數(shù)判斷變量類型的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript基于自定義函數(shù)判斷變量類型的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript判斷變量類型的自定義函數(shù)定義與使用方法,并針對(duì)不同瀏覽器給出了相關(guān)的分析與說(shuō)明,需要的朋友可以參考下
2016-11-11
TS中declare的簡(jiǎn)單使用方法
declare 關(guān)鍵字用來(lái)告訴編譯器,某個(gè)類型是存在的,可以在當(dāng)前文件中使用,本文給大家介紹TS中declare的簡(jiǎn)單使用方法,感興趣的朋友一起看看吧
2023-12-12
JavaScript中的null和undefined區(qū)別介紹
這篇文章主要介紹了JavaScript中的null和undefined區(qū)別介紹,JavaScript中存在2個(gè)代表信息不存在的特殊值：null和undefined,本文主要講解它們的區(qū)別,需要的朋友可以參考下
2015-01-01
微信小程序?qū)崿F(xiàn)表單校驗(yàn)功能
微信小程序最難實(shí)現(xiàn)的公共業(yè)務(wù)是什么？應(yīng)該是表單校驗(yàn)，這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)表單校驗(yàn)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
javascript判斷firebug是否開啟的方法
這篇文章主要介紹了javascript判斷firebug是否開啟的方法,結(jié)合實(shí)例形式分析了javascript基于console控制臺(tái)方法判斷firebug開啟狀態(tài)的相關(guān)操作技巧,需要的朋友可以參考下
2016-11-11
js截取字符串功能的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了js截取字符串功能的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
不到30行JS代碼實(shí)現(xiàn)Excel表格的方法
這篇文章主要介紹了不到30行JS代碼實(shí)現(xiàn)Excel表格的方法,實(shí)現(xiàn)方法簡(jiǎn)單易懂,非常具有實(shí)用價(jià)值,可部分代替jQuery的功能,需要的朋友可以參考下
2014-11-11
JavaScript使用cookie實(shí)現(xiàn)記住賬號(hào)密碼功能
這篇文章主要介紹了JavaScript使用cookie實(shí)現(xiàn)記住賬號(hào)密碼功能,本文直接給出完整測(cè)試代碼,需要的朋友可以參考下
2015-04-04