javascript怎麼刪除table表格-js教程-PHP中文網

javascript怎麼刪除table表格

青灯夜游

發布： 2023-01-05 16:12:08

原創

6886 人瀏覽過

javascript刪除table表格的方法：先使用「document.getElementById()」方法取得table元素物件及其父元素物件；然後使用「父元素物件.removeChild(table元素物件)」語句來刪除表格即可。

javascript怎麼刪除table表格

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

javascript刪除table表格的方法：

#取得table表格的父元素物件與table物件
使用remove()方法刪除able表格物件

程式碼範例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<body id="body">
		<table border="1" id="table">
			<tr>
				<th>name</th>
				<th>job</th>
			</tr>
			<tr>
				<td>灭绝师太</td>
				<td>PHP中文网高级讲师</td>
			</tr>
			<tr>
				<td>欧阳克</td>
				<td>PHP中文网讲师</td>
			</tr>
			<tr>
				<td>韦小宝</td>
				<td>PHP中文网初级讲师</td>
			</tr>
		</table>
		<p id="demo">点击按钮，删除table表格。</p>
		<button onclick="myFunction()">点击按钮</button>
	</body>
<script>
	function myFunction() {
		var body = document.getElementById("body");
		var table = document.getElementById("table");
		body.removeChild(table);
	}
</script>
</html>

登入後複製

效果圖：

javascript怎麼刪除table表格

說明：

remove()方法可用來刪除父節點上的所有元素，包括所有文字和子節點。

找出元素的方法：

1.根據id取得元素

document.getElementById("id属性的值");

登入後複製

2.根據標籤名稱取得元素

document.getElementsByTagName("标签的名字");

登入後複製

3.根據name屬性的值取得元素

document.getElementsByName("name属性的值");

登入後複製

4.根據class屬性取得元素

document.getElementsByClassName("类样式的名字");

登入後複製

5.根據css路徑取得元素（取得一個）

document.querySelector("css路径");

登入後複製

6.根據css路徑取得元素（取得一組）

document.querySelectorAll("css路径");

登入後複製

【建議學習：javascript高階教學】

以上是javascript怎麼刪除table表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

javascript怎麼刪除table表格