javascript基礎（dom增刪改）（二十九）
1.原始碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function() {
//建立一個"廣州"節點,新增到#city下
//為id為btn01的按鈕繫結一個單擊響應函式
myClick("btn01",function(){
//建立一個廣州節點
//<li>廣州</li>
//建立一個新的li
/*
* createElement()
* - 可以根據標籤名來建立一個指定的元素節點物件
*/
var gzLi = document.createElement("li");
//建立廣州這個文字節點
/*
* createTextNode()
* - 可以根據文字內容建立一個文字節點物件
*/
var gzText = document.createTextNode("廣州");
/*
* 將gzText作為子節點新增到gzLi下
*/
/*
* appendChild()
* - 可以向父節點中新增新的子節點
* - 語法：父節點.appendChild(子節點)
*/
gzLi.appendChild(gzText);
//獲取id為city的元素
var city = document.getElementById("city");
//將廣州節點新增到id為city的節點下
city.appendChild(gzLi);
});
//將"廣州"節點插入到#bj前面
myClick("btn02",function(){
//建立一個廣州
var gzLi = document.createElement("li");
var gzText = document.createTextNode("廣州");
gzLi.appendChild(gzText);
//獲取id為bj的元素
var bj = document.getElementById("bj");
//將"廣州"節點插入到#bj前面
/*
* insertBefore()
* - 可以在指定的子節點前插入新的子節點
* - 這個方法需要由父節點呼叫
* - 語法：父節點.insertBefore(新的節點,舊的節點)
*/
//獲取id為city的元素
var city = document.getElementById("city");
city.insertBefore(gzLi , bj);
});
//使用"廣州"節點替換#bj節點
myClick("btn03",function(){
//建立一個廣州
var gzLi = document.createElement("li");
var gzText = document.createTextNode("廣州");
gzLi.appendChild(gzText);
//獲取id為bj的元素
var bj = document.getElementById("bj");
/*
* replaceChild()
* - 可以使用指定的子節點替換已有的子節點
* - 語法：
* 父節點.replaceChild(新的節點,舊的節點);
*
*/
//獲取id為city的元素
var city = document.getElementById("city");
city.replaceChild(gzLi , bj);
});
//刪除#bj節點
myClick("btn04",function(){
//獲取id為bj的節點
var bj = document.getElementById("bj");
/*
* removeChild()
* - 用於刪除一個子節點
* - 語法：父節點.removeChild(子節點);
*/
//獲取id為city的元素
//var city = document.getElementById("city");
//city.removeChild(bj);
/*
* 子節點.parentNode.removeChild(子節點)
*/
bj.parentNode.removeChild(bj);
});
//讀取#city內的HTML程式碼
myClick("btn05",function(){
var city = document.getElementById("city");
alert(city.innerHTML);
});
//設定#bj內的HTML程式碼
myClick("btn06",function(){
var bj = document.getElementById("bj");
bj.innerHTML = "平西府";
/*
* 實際上使用innerHTML也可以完成頁面中元素的增刪改查，而且比我們這種常規方式更加簡單
*/
});
myClick("btn07",function(){
//獲取city節點
var city = document.getElementById("city");
//alert(city.innerHTML);
//向city中，新增一個<li>廣州</li>
//city.innerHTML += "<li>廣州</li>";
//建立一個li元素節點
var gzLi = document.createElement("li");
//向li中新增文字
gzLi.innerHTML = "廣州";
//將li新增到city中
city.appendChild(gzLi);
});
};
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜歡哪個城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">建立一個"廣州"節點,新增到#city下</button></div>
<div><button id="btn02">將"廣州"節點插入到#bj前面</button></div>
<div><button id="btn03">使用"廣州"節點替換#bj節點</button></div>
<div><button id="btn04">刪除#bj節點</button></div>
<div><button id="btn05">讀取#city內的HTML程式碼</button></div>
<div><button id="btn06">設定#bj內的HTML程式碼</button></div>
<div><button id="btn07">建立一個"廣州"節點,新增到#city下</button></div>
</div>
</body>
</html>
2.css樣式：
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
2.練習：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增刪除記錄練習</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
window.onload = function(){
//定義一個用於刪除tr的函式
function delA(){
//刪除當前的超連結所在的行
//點選哪個超連結，this就是誰
//alert(this);
//獲取當前超連結所在的tr
var tr = this.parentNode.parentNode;
//獲取要刪除的使用者的名字
var name = tr.children[0].innerHTML;
//刪除之前，彈出一個提示框
/*
* confirm()
* - 可以用來彈出一個帶有確認和取消按鈕的提示框
* - 如果使用者點選確認則返回true
* 如果點選取消則返回false
*/
var flag = confirm("確認刪除"+name+"嗎？");
//如果使用者點選確認
if(flag){
//刪除tr
tr.parentNode.removeChild(tr);
}
//點選超連結以後，它會立即跳轉頁面，這個是超連結的預設行為
//如果要取消元素的預設行為，可以在元素響應函式的最後 return false
return false;
};
/*
* 刪除員工
* - 點選超連結以後，刪除超連結所在行的員工資訊
*/
//獲取所有的超連結
var links = document.getElementsByTagName("a");
//為每個超連結都繫結一個單擊響應函式
for(var i=0 ; i<links.length ; i++){
links[i].onclick = delA;
}
/*
* 點選提交按鈕以後，將表單中的資訊新增到表格中
*/
//為提交按鈕繫結一個單擊響應函式
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function(){
//獲取使用者填寫的資訊
//獲取使用者填寫的員工的姓名
var name = document.getElementById("empName").value;
//獲取員工的email和salary
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
/*
* 將獲取到的資訊，儲存到一個tr中
* <tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
*/
//建立一個tr
var tr = document.createElement("tr");
//建立四個td
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
//建立一個超連結
var a = document.createElement("a");
//建立文字節點
var nameText = document.createTextNode(name);
var emailText = document.createTextNode(email);
var salaryText = document.createTextNode(salary);
var delText = document.createTextNode("Delete");
//將文字新增到td中
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
//向超連結中新增delete文字
a.appendChild(delText);
//將超連結放入到td中
aTd.appendChild(a);
//將td新增到tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
//為a新增一個href屬性
a.href="javascript:;";
//由於我們這裡建立的a是後加入的，還沒有繫結單擊響應函式，所以新加入的a並沒有刪除的功能
//需要單獨為超連結繫結一次單擊響應函式
a.onclick = delA;
//獲取table
var employeeTable = document.getElementById("employeeTable");
//獲取tbody
var tbody = employeeTable.getElementsByTagName("tbody")[0];
//將tr新增到table中
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="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<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">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
css:
@CHARSET "UTF-8";
#total {
width: 450px;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
}
li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float: left;
}
.inner {
width: 400px;
border-style: solid;
border-width: 1px;
margin: 10px;
padding: 10px;
float: left;
}
#employeeTable {
border-spacing: 1px;
background-color: black;
margin: 80px auto 10px auto;
}
th,td {
background-color: white;
}
#formDiv {
width: 250px;
border-style: solid;
border-width: 1px;
margin: 50px auto 10px auto;
padding: 10px;
}
#formDiv input {
width: 100%;
}
.word {
width: 40px;
}
.inp {
width: 200px;
}
相關文章
- JS基礎_dom增刪改JS
- SQL 基礎增、刪、改、查SQL
- MySQL基礎操作(增刪改查)MySql
- 二十九、Elasticsearch的增刪改內部原理Elasticsearch
- MySQL表的增刪改查（基礎）MySql
- javascript基礎（class 類屬性的操作（增，刪，改，查））（四十五）JavaScript
- 看Zepto如何實現增刪改查DOM
- 回到基礎：理解 JavaScript DOMJavaScript
- JavaScript基礎之DOM操作JavaScript
- 圍繞DOM元素節點的增刪改查
- JavaScript表格增刪改查詳解JavaScript
- JavaScript 基礎(四) – HTML DOM EventJavaScriptHTML
- JavaScript學習7：DOM基礎JavaScript
- 增刪改查
- JavaScript基礎 —— DOM：遍歷 與 範圍JavaScript
- javascript基礎（DOM查詢）（二十六）JavaScript
- javascript快速入門14--DOM基礎JavaScript
- 【轉】JavaScript對Json節點的增刪改JavaScriptJSON
- C# XML基礎入門（XML檔案內容增刪改查清）C#XML
- SSM整合_年輕人的第一個增刪改查_基礎環境搭建SSM
- indexedDB 增刪改查Index
- SQL增刪改查SQL
- 文件的增刪改
- mysql增刪改查MySql
- Mongoose查增改刪Go
- FMDB增刪改查
- mysql增查刪改MySql
- QBMySQL與PHP的基礎與應用專題之增刪改查uneMySqlPHP
- JavaScript的基礎語法及DOM元素和事件JavaScript事件
- 【零基礎上手JavaWeb】快速上手 JavaScript DOM操作WebJavaScript
- javascript基礎（Dom查詢練習）（二十七）JavaScript
- JavaScript中陣列的增刪改查以及應用方式JavaScript陣列
- layui的增刪改查UI
- sql指令，增，刪，查，改SQL
- EFCore之增刪改查
- 資料的增刪改
- 列表的增刪改查
- 字典的增刪改查