js中BOM實戰專案之動態表格
🍅 Java學習路線：搬磚工的Java學習路線
🍅 作者：程式員小王
🍅 程式員小王的博客：https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF
🍅 掃描主頁左側二維碼，加我微信 一起學習、一起進步
🍅 歡迎點贊 👍 收藏 ?留言 📝
一、動態洗掉/生成表格要求：
-
HTML標簽只寫三行表頭
-
通過JS來寫動態的表格（有多少組資料，就自動創建多少行表格）
-
通過JS來洗掉動態的表格（一行一行的表格）
-
不涉及呼叫后臺資料
先來看一下效果：
二、動態洗掉、添加的思路（知識點鋪墊）:
（1）動態添加資料
1、創建文本節點：document.createTextNode(“文本”);
2、創建標簽節點：document.createElement(“標簽名”);
3、向父節點上追加節點： 父標簽物件.appendChild(子標簽物件)
1.創建文本節點：document.createTextNode(“文本”);
2.創建新的標簽物件：
var tag=document.createElement("標簽名");
eg:<h1>HelloWorld</h1>
var tag=document.createElement("h1");
tag.innerHTML="HelloWorld";
3.添加新標簽物件：
parentTag.appendChild(newTag);-->將newTag添加到現有標簽的最后面，稱為父標簽的最后一個孩子節點
- 案例：
<head>
<meta charset="UTF-8">
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
function test1(){
//1、創建div物件
var div = document.createElement("div");
//2.創建文本物件
var textNode = document.createTextNode("whj");
//3.將文本節點追加到div標簽節點中,將textNode節點添加到div最后一個子節點上
div.appendChild(textNode);
//4.將div標簽節點追加到當前頁面中
var body = document.getElementById("bd");
body.appendChild(div);
}
</script>
</head>
<body id="bd">
<input type="button" value="單擊創建div" onclick="test1()">
</body>
（2）動態洗掉
父標簽物件.removeChild(子標簽物件);
1.洗掉標簽物件：
parentTag.removeChild(childTag)-->從父標簽物件中洗掉孩子標簽物件
- 案例：單擊洗掉div+div的whj文本
<head>
<meta charset="UTF-8">
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
function test1(){
var body = document.getElementById("body");
var div = document.getElementById("div");
body.removeChild(div);
}
</script>
</head>
<body id="body">
<div id="div">
whj
</div>
<input type="submit" value="單擊洗掉div+div的whj文本" onclick="test1()">
</body>
三、DOM實戰-動態表格
javascript實作動態洗掉、添加先捋一下思路：
要想實作動態效果，那就得使用增刪節點的知識，
1、動態表格添加資料分析：
事件源頭：發送事件的標簽 提交的標簽
事件屬性：用戶的操作 單擊
事件監聽：將用戶輸入的資料填充到表格中
1、用戶輸入的資料
2、填充到表格里
function addUser(){
//1、通過標簽元素value屬性值 獲取用戶輸入內容
//2、將輸入的內容封裝成文本節點
//3、創建td標簽物件
//4、將對應的文本節點放到td標簽中
//5、創建tr文本節點
//6、將對應的td的標簽放到tr標簽中
//7、將tr放到表格中
}
2、動態表格洗掉資料分析：
事件源頭：發送事件的標簽 洗掉的按鈕
事件屬性：用戶的操作 單擊
事件監聽：表格中的一行資料洗掉（tr）
1、獲取洗掉哪一行資料
2、洗掉
function removeUser(){
//1、先獲取事件源
var buttonSource=event.target;
//2.獲取事件源的父標簽（td）的父標簽（tr）
var tr=buttonSource.parentNode.parentNode;
//3.獲取tr標簽的父標簽（tbody或者是thead,為了避免找不到父標簽使用parentNode）
var parentNode=tr.parentNode;
//4.洗掉這一行資料
parentNode.removeClild(tr);
}
3、代碼實作動態洗掉、添加表格：
（1）代碼結構
（2）HTML內容：
<body>
<!--換行-->
</br>
<!--換行-->
</br>
<div id="div">
<!--居中-->
<center>
姓名：<input type="text" name="name" id="name">
年齡：<input type="text" name="age" id="age">
成績：<input type="text" name="score" id="score">
職位：<input type="text" name="job" id="job">
<input type="button" id="button" value="添加" onclick="addUser()">
</center>
</div>
<hr color="red"/>
<div class="container">
<p class="btn btn-danger mb-3" data-table="example">DOM實戰-動態表格</p>
<table class="table table-bordered table-striped" id="table">
<thead class="thead-dark">
<tr>
<th scope="col">姓名</th>
<th scope="col">年齡</th>
<th scope="col">成績</th>
<th scope="col">職位</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>劉浩</td>
<td>28</td>
<td>100</td>
<td>老師</td>
<td>
<input type="button" style="color: red" value="洗掉" onclick="deleteUser()">
</td>
</tr>
<tr>
<td>王恒杰</td>
<td>21</td>
<td>99</td>
<td>組長</td>
<td>
<input type="button" style="color:red" value="洗掉" onclick="deleteUser()">
</td>
</tr>
<tr>
<td>張西</td>
<td>20</td>
<td>88</td>
<td>學生</td>
<td>
<input type="button" style="color: red" value="洗掉" onclick="deleteUser()">
</td>
</tr>
</tbody>
</table>
</div>
</body>
（3）CSS內容：
<meta charset="UTF-8">
<title>動態表格</title>
<link rel="stylesheet" href="http://cdn.bootstrapmb.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.container {
margin: 80px auto;
}
</style>
(4) JavaScript內容：
<script type="text/javascript">
//將用戶輸入的資料填充到表格中
function addUser(){
//1、通過表單元素value屬性值 獲取用戶輸入內容 字串
var name = document.getElementById("name").value
var tel = document.getElementById("tel").value
var email = document.getElementById("email").value
//2、將輸入的內容封裝成文本節點
var nameNode = document.createTextNode(name);
var telNode = document.createTextNode(tel);
var emailNode = document.createTextNode(email);
//3 、創建td標簽物件
var nameTd = document.createElement("td");
var telTd = document.createElement("td");
var emailTd = document.createElement("td");
//4、將對應的文本節點放入對應的td里
nameTd.appendChild(nameNode);
telTd.appendChild(telNode);
emailTd.appendChild(emailNode);
//5、創建tr標簽物件
var tr = document.createElement("tr");
//6、將td放入tr中
tr.appendChild(nameTd)
tr.appendChild(telTd)
tr.appendChild(emailTd);
//7、將tr放入表格中
var table = document.getElementById("tb");
table.appendChild(tr);
}
//動態洗掉 洗掉當前行資料
function removeUser1(){
//洗掉語法 父節點.removeChild(子節點)
//通過事件物件獲取事件發生的源頭
var delbtn = event.target ;
//通過事件源獲取父節點的父節點 就是tr標簽物件
var tr = delbtn.parentNode.parentNode;
var parNode = tr.parentNode;
parNode.removeChild(tr);
}
//動態洗掉 洗掉當前行資料
function removeUser2(delbtn){
//洗掉語法 父節點.removeChild(子節點)
var tr = delbtn.parentNode.parentNode;
var parNode = tr.parentNode;
parNode.removeChild(tr);
}
</script>
源代碼在githee倉庫：
程式員小王Gitee: https://gitee.com/wanghengjie563135/java-web-notes.git
👉在此，鳴謝：劉浩老師
📌 作者：王恒杰
📃 更新： 2021.10.19
? 勘誤： 無
📜 宣告： 由于作者水平有限，本文有錯誤和不準確之處在所難免，本人也很想知道這些錯誤，懇望讀者批評指正！
🍅 歡迎點贊 👍 收藏 ?留言 📝
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/325611.html
標籤：其他
上一篇：Ajax 學習筆記
下一篇：cgb2108-day14