JavaScript入門(mén)
JavaScript是一種輕量級(jí)、解釋型的Web開(kāi)發(fā)語(yǔ)言，該語(yǔ)言系統(tǒng)不是很龐雜，簡(jiǎn)單易學(xué)。由于所有現(xiàn)代瀏覽器都已經(jīng)嵌入了JavaScript引擎，JavaScript源代碼可以再瀏覽器中直接被解釋執(zhí)行，用戶不用擔(dān)心支持問(wèn)題，這是一個(gè)js入門(mén)的小練習(xí)
對(duì)于表格信息的增添與刪除
簡(jiǎn)單的DOM操作html標(biāo)簽即可實(shí)現(xiàn)，代碼如下：
|
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(){ //點(diǎn)擊超鏈接刪除那一行 //使用this，刪除父級(jí)元素 var tr = this.parentNode.parentNode; //獲取要?jiǎng)h除人員的名字 var name=tr.getElementsByTagName("td")[0].innerHTML; //提示用戶是否刪除 var flag=confirm("是否刪除"+name+"？"); if(flag){ tr.parentNode.removeChild(tr); } //阻止瀏覽器默認(rèn)行為，比如彈出新的標(biāo)簽頁(yè) return false; } window.onload=function(){ //點(diǎn)擊超鏈接刪除一個(gè)員工信息 //獲取鏈接 var allA=document.getElementsByTagName("a"); //綁定響應(yīng)函數(shù) for(var i=0;i<allA.length;i++){ allA[i].onclick=delA; } //添加員工功能,點(diǎn)擊按鈕將信息添加到表格中 var addEmpButton = document.getElementById("addEmpButton"); addEmpButton.onclick=function(){ //獲取輸入框中的文本內(nèi)容 var empName=document.getElementById("empName").value; var email=document.getElementById("email").value; var salary=document.getElementById("salary").value; //創(chuàng)建一個(gè)tr var tr=document.createElement("tr"); //向tr中添加內(nèi)容 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屬性是單元格可橫跨的行數(shù)和列數(shù)--> <!--align屬性是文本對(duì)齊位置--> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </table></body></html> |
代碼片段里注釋非常清楚，適合拿來(lái)練練手。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/qq_51649438/article/details/115415134
