JavaScript入門
JavaScript是一種輕量級、解釋型的Web開發語言，該語言系統不是很龐雜，簡單易學。由于所有現代瀏覽器都已經嵌入了JavaScript引擎，JavaScript源代碼可以再瀏覽器中直接被解釋執行，用戶不用擔心支持問題，這是一個js入門的小練習
對于表格信息的增添與刪除
簡單的DOM操作html標簽即可實現，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } </style> <script type="text/javascript"> function delA(){ //點擊超鏈接刪除那一行 //使用this，刪除父級元素 var tr = this.parentNode.parentNode; //獲取要刪除人員的名字 var name=tr.getElementsByTagName("td")[0].innerHTML; //提示用戶是否刪除 var flag=confirm("是否刪除"+name+"？"); if(flag){ tr.parentNode.removeChild(tr); } //阻止瀏覽器默認行為，比如彈出新的標簽頁 return false; } window.onload=function(){ //點擊超鏈接刪除一個員工信息 //獲取鏈接 var allA=document.getElementsByTagName("a"); //綁定響應函數 for(var i=0;i<allA.length;i++){ allA[i].onclick=delA; } //添加員工功能,點擊按鈕將信息添加到表格中 var addEmpButton = document.getElementById("addEmpButton"); addEmpButton.onclick=function(){ //獲取輸入框中的文本內容 var empName=document.getElementById("empName").value; var email=document.getElementById("email").value; var salary=document.getElementById("salary").value; //創建一個tr var tr=document.createElement("tr"); //向tr中添加內容 tr.innerHTML="<td>"+empName+"</td>"+ "<td>"+email+"</td>"+ "<td>"+salary+"</td>"+ "<td><a href='javascript:;'>Delete</a></td>"; var a= tr.getElementsByTagName("a")[0]; a.onclick=delA; //把tr放在table中 var employeeTable=document.getElementById("employeeTable"); //獲取tbody var tbody=document.getElementsByTagName("tbody")[0]; tbody.appendChild(tr); } } </script></head><body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="">Delete</a></td> </tr> <div id="formDiv"> <h4>添加新員工</h4> <table> <tr> <td class="word">name: </td> <td class="inp"> <input type="text" name="empName" id="empName"> </td> </tr> <tr> <td class="word">email: </td> <td class="inp"> <input type="text" name="email" id="email"> </td> </tr> <tr> <td class="word">salary: </td> <td class="inp"> <input type="text" name="salary" id="salary"> </td> </tr> <tr> <td colspan="2" align="center"> <!--colspan和rowspan屬性是單元格可橫跨的行數和列數--> <!--align屬性是文本對齊位置--> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </table></body></html> |
代碼片段里注釋非常清楚，適合拿來練練手。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_51649438/article/details/115415134
