JavaScript獲取表格（table）當前行的值、刪除行、增加行

2024-05-06 16:22:38

字體：大中小

來源：轉載

供稿：網友

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

<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>