（全選，取消，反選）
DOM實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
/*display:none；不顯示該標籤*/
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
/*
position:fixed； 固定頁面某個位置，（多層，這裏第二層）
left: 0;top: 0;right: 0;bottom: 0; 覆蓋全背景層（第一層）
background-color: black; 背景顏色：黑色
opacity: 0.6;透明度
z-index: 9; 層優先級，越大越上層
*/
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
/*
width: 500px;height: 400px; 該標籤的寬度高度
position:fixed； 固定頁面某個位置，（多層，這裏第三層）
background-color: white; 背景顏色:白色
left: 50%; top: 50%;margin-left: -250px;margin-top: -200px; 該標籤居中
z-index: 10; 層優先級，越大越上層
*/
</style>
</head>
<body style="margin: 0;">
<div>
<input type="button" value="添加" onclick="ShowModel();" />
<input type="button" value="全選" onclick="ChooseAll();" />
<input type="button" value="取消" onclick="CancleAll();" />
<input type="button" value="反選" onclick="ReverseAll();" />
<!--onclick="ShowModel();"點擊該添加按鈕就調用的ShowModel()函數-->
<table>
<!--table：表-->
<thead>
<!--thead：表頭部-->
<tr>
<th>選擇</th>
<th>主機名</th>
<th>端口</th>
</tr>
<!--tr：行 th：列-->
</thead>
<tbody id="tb">
<!--tbody：表內容-->
<tr>
<td>
<input type="checkbox" checked="true" />
<!--input type="checkbox" 多選擇框
checked="true" 有該了屬性等於默認勾上-->
</td>
<td>1.1.1.1</td>
<td>190</td>
</tr>
<tr>
<td><input type="checkbox"f id="test" /></td>
<td>1.1.1.2</td>
<td>192</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.3</td>
<td>193</td>
</tr>
<!--tr：行 td：列-->
</tbody>
</table>
</div>
<!-- 遮罩層開始 -->
<div id="i1" class="c1 hide"></div>
<!-- 遮罩層結束 -->
<!-- 彈出框開始 -->
<div id="i2" class="c2 hide">
<p><input type="text" /></p>
<p><input type="text" /></p>
<!--文本輸入框-->
<p>
<input type="button" value="取消" onclick="HideModel();"/>
<!-- onclick="HideModel();"點擊該添加按鈕就調用的HideModel()函數-->
<input type="button" value="確定"/>
</p>
</div>
<!-- 彈出框結束 -->
<script>
function ShowModel(){
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
/*
獲取id=i1的標籤並且去掉該標籤的class屬性的value:hide
獲取id=i2的標籤並且去掉該標籤的class屬性的value:hide
*/
function HideModel(){
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
/*
獲取id=i1的標籤並且增加該標籤的class屬性的value:hide
獲取id=i2的標籤並且增加該標籤的class屬性的value:hide
*/
function ChooseAll(){
var tbody = document.getElementById('tb');
//獲取id=tb的標籤
var tr_list = tbody.children;
//獲取該標籤的所有子標籤tr
for(var i=0;i<tr_list.length;i++){
//循環所有的tr標籤，current_tr
var current_tr = tr_list[i];
//獲取所有tr的下標的元素賦值給current_tr
var checkbox = current_tr.children[0].children[0];
//取出該tr下標0的元素（該tr標籤的第一個子標籤）的下標0的元素（tr標籤的第一個子標籤下的第一子標籤）
checkbox.checked = true;
/*
checkbox.checked = false;修改該標籤的checked屬性=true
checked 是input標籤checkbox多選擇框的屬性
checked=true;等於選擇默認勾上
checked=false; 等於選擇默認不勾
*/
}
}
function CancleAll(){
var tbody = document.getElementById('tb');
//獲取id=tb的標籤
var tr_list = tbody.children;
//獲取該標籤的所有子標籤tr
for(var i=0;i<tr_list.length;i++){
//循環所有的tr標籤，current_tr
var current_tr = tr_list[i];
//獲取所有tr的下標的元素賦值給current_tr
var checkbox = current_tr.children[0].children[0];
//取出該tr下標0的元素（該tr標籤的第一個子標籤）的下標0的元素（tr標籤的第一個子標籤下的第一子標籤）
checkbox.checked = false;
/*
checkbox.checked = false;修改該標籤的checked屬性=false
checked 是input標籤checkbox多選擇框的屬性
checked=true;等於選擇默認勾上
checked=false; 等於選擇默認不勾
*/
}
}
function ReverseAll(){
var tbody = document.getElementById('tb');
//獲取id=tb的標籤
var tr_list = tbody.children;
//獲取該標籤的所有子標籤tr
for(var i=0;i<tr_list.length;i++){
// 循環所有的tr，current_tr
var current_tr = tr_list[i];
//獲取所有tr的下標的元素賦值給current_tr
var checkbox = current_tr.children[0].children[0];
//取出該tr下標0的元素（該tr標籤的第一個子標籤）的下標0的元素（tr標籤的第一個子標籤下的第一子標籤）
if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}
/*
假如該標籤的checked屬性是true的話 那麼久執行checkbox.checked = false;
假如該標籤的checked屬性是false的話 那麼久執行checkbox.checked = true;
*/
</script>
</body>
</html>
執行結果：
jQuery實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全選" onclick="checkAll();" />
<input type="button" value="反選" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancleAll();"/>
<table border="1">
<thead>
<tr>
<th>選項</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<!--type="checkbox" #選擇框-->
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true)
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
/*
$('#tb :checkbox') #獲取id=tb的標籤的子標籤匹配的input標籤內部屬性checkbox的標籤
.prop #選中所有匹配的標籤
('checked',true) #修改checked="true" 意味選擇框選擇
('checked',false) #修改checked="false" 意味選擇框不選擇
*/
function reverseAll() {
$(':checkbox').each(function (k) {
/*
$(':checkbox') #獲取匹配的input標籤內部屬性checkbox的標籤
.each #自動循環的所有匹配的標籤（所有的元素（匹配的標籤裝入列表））
（function{}）執行函數
*/
console.log(this);
console.log($(this));
console.log(k);
/*
(按反選按鍵的時候console頁會打印可看上面3個結果）
this==每一個元素（dom對象，狀態：標籤<>）
$(this)==每一個元素（jQuery對象，狀態:列表[]）
k==每一個元素下標（0開頭）
*/
//第一種方式解決使用DOM的if判斷語句解決反選問題
/*
if(this.checked){
this.checked = false;
}else{
this.checkd = true;
}
//DOM方式進行判斷：如果該標籤（元素）checked=true就執行修改成false,否則執行修改true
*/
//第二種方式使用jQuery的if判斷語句解決反選問題
/*
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
//jQuery方式進行判斷
//prop：選定
//假如該標籤被選擇狀態是checked=true，那麼該被選擇的標籤狀態更改checked=false
//其他如該被選擇的標籤狀態是checked=false，那麼該被選擇的標籤狀態更改checked=true
*/
// 第三種方式解決使用jQuery三元運算解決反選問題（DOM也可以三元運算)
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
// 三元運算： var v = 條件？真值：假值
//prop：選定
// 假如該被選擇的標籤值checked=true就是真，就返回false賦值給v ，該被選擇標籤更改成v
//假如該被選擇的標籤值checked=false就是假，就返或true賦值給v，該被選擇標籤更改成v
})
}
</script>
</body>
</html>
執行結果：
tab菜單欄
DOM實現（三種方式）
傳入id值方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
/*display:none；不顯示該標籤*/
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div style="height: 48px"></div>
<div style="width: 300px">
<div class="item">
<div id='i1' class="header" onclick="ChangeMenu('i1');">菜單1</div>
<div class="content">
<div>內容1</div>
<div>內容1</div>
<div>內容1</div>
</div>
</div>
<!-- 通過class關鍵字裝飾 點擊該標籤觸發onclick：執行ChangeMenu('i1')函數
i1：作爲實參
class="content"通過class關鍵字調取content樣式（裝飾功能）-->
<div class="item">
<div id='i2' class="header" onclick="ChangeMenu('i2');">菜單2</div>
<div class="content hide">
<div>內容2</div>
<div>內容2</div>
<div>內容2</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" onclick="ChangeMenu('i3');">菜單3</div>
<div class="content hide">
<div>內容3</div>
<div>內容3</div>
<div>內容3</div>
</div>
</div>
<div class="item">
<div id='i4' class="header" onclick="ChangeMenu('i4');">菜單4</div>
<div class="content hide">
<div>內容4</div>
<div>內容4</div>
<div>內容4</div>
</div>
</div>
</div>
<script>
function ChangeMenu(nid){
var current_header = document.getElementById(nid);
//獲取該形參的id標籤
var item_list = current_header.parentElement.parentElement.children;
//獲取該標籤的父標籤的父標籤的所有子標籤
for(var i=0;i<item_list.length;i++){
//循環該標籤的所有子標籤
var current_item = item_list[i];
//所有子標籤標籤的下標元素賦值到current_item
current_item.children[1].classList.add('hide');
//所有子標籤下標2的元素（第二個子標籤）增加class裝飾功能hide（加上就等於不顯示該標籤）
}
current_header.nextElementSibling.classList.remove('hide');
//該標籤的下一個兄弟標籤移除class屬性的hide樣式（裝飾功能）
}
</script>
</body>
</html>
ths模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
/*display:none；不顯示該標籤*/
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div style="height: 48px"></div>
<div style="width: 300px">
<div class="item">
<div class="header" onclick="ChangeMenu(this);">菜單1</div>
<div class="content">
<div>內容1</div>
<div>內容1</div>
<div>內容1</div>
</div>
</div>
<!-- 通過class關鍵字裝飾 點擊該標籤觸發onclick：執行ChangeMenu('i1')函數
i1：作爲實參
class="content"通過class關鍵字調取content樣式（裝飾功能）-->
<div class="item">
<div class="header" onclick="ChangeMenu(this);">菜單2</div>
<div class="content hide">
<div>內容2</div>
<div>內容2</div>
<div>內容2</div>
</div>
</div>
</div>
<script>
function ChangeMenu(ths){
/*
var current_header = document.getElementById(nid);
//獲取該形參的id標籤
*/
current_header = ths;
var item_list = current_header.parentElement.parentElement.children;
//獲取該標籤的父標籤的父標籤的所有子標籤
for(var i=0;i<item_list.length;i++){
//循環該標籤的所有子標籤
var current_item = item_list[i];
//所有子標籤標籤的下標元素賦值到current_item
current_item.children[1].classList.add('hide');
//所有子標籤下標2的元素（第二個子標籤）增加class裝飾功能hide（加上就等於不顯示該標籤）
}
current_header.nextElementSibling.classList.remove('hide');
//該標籤的下一個兄弟標籤移除class屬性的hide樣式（裝飾功能）
}
</script>
</body>
</html>
相分離模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
/*display:none；不顯示該標籤*/
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div style="height: 48px"></div>
<div style="width: 300px">
<div class="item">
<div class="header">菜單1</div>
<div class="content">
<div>內容1</div>
<div>內容1</div>
<div>內容1</div>
</div>
</div>
<div class="item">
<div class="header">菜單2</div>
<div class="content hide">
<div>內容2</div>
<div>內容2</div>
<div>內容2</div>
</div>
</div>
</div>
<script>
var mydiv = document.getElementsByClassName("header");
// 通過class關鍵值以列表形式獲取所有匹配標籤
var len = mydiv.length;
// 該列表長度（下標長度）
for(var i=0;i<len;i++){
// 循環
mydiv[i].onclick = function () {
// mydiv[i]=該列表的所有標籤增加了（事件功能onclick = 匿名函數執行）
mydiv01 = this.parentElement.parentElement.children;
/*
獲取該標籤的父標籤的父標籤的所有子標籤；
這裏的this和JavaScript的面向對象this不一樣（嚴重記住）
這裏的this含義：誰調用這個函數，這個函數就執行誰（非常重要要記住）
簡單理解就是：目前所有匹配class關鍵字'header'的標籤都增加了（事件功能onclick）
而onclick標籤的作用：點擊該便籤就觸發執行函數
爲了區別那個標籤點擊，this起到了作用就是
哪個標籤被點擊，那麼該標籤就觸發（事件功能onclick）執行該函數
爲什麼不用 myTrs01[i].parentElement.parentElement.children;
原因是作用域的執行順序問題，循環的時候i=0;i=1;
當i=0的時候，我們根本就沒有去觸發事件功能，那麼他就會繼續循環
所以最終i=1，這個時候我們纔有可能觸發，這樣就達不到我們的效果，
所以this：可以理解成循環等待，等待觸發
*/
len = mydiv01.length;
// 標籤的長度
for(var i=0;i<len;i++){
//循環
var current_item = mydiv01[i];
//current_item==取觸發標籤的父標籤的父標籤的所有子標籤
current_item.children[1].classList.add('hide');
//current_item的子標籤的下標1的標籤移除class屬性的hide樣式
}
this.nextElementSibling.classList.remove('hide');
//觸發該函數的標籤的下面兄弟標籤增加class屬性的hide樣式
}
}
</script>
</body>
</html>
以上三種方式執行結果：
--點擊菜單2-->
jQuery實現（兩種顯示：橫豎）
豎行顯示實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: black;
color: wheat;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height:400px;width: 200px;border: 1px solid #dddddd">
<div class="item">
<div class="header">標題一</div>
<div id="i1" class="content hide">內容</div>
</div>
<div class="item">
<div class="header">標題二</div>
<div class="content hide">內容</div>
</div>
<div class="item">
<div class="header">標題三</div>
<div class="content hide">內容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function() {
// 獲取匹配標籤添加click事件按鈕（綁定事件）
/*
進入需求分析（匹配到的都是標題標籤）
$(this) 獲取當前標籤(lable)（jQuery對象，狀態：列表）
1.點擊該標籤的時候的下一個兄弟標籤的內容標籤會彈出所以需要：
(獲取當前標籤的下一個兄弟標籤)
(移除內容標籤的hide樣式：內容標籤顯示)
2.需要把其他的標題標籤的內容標籤進行隱藏所以需要：
(獲取當前標籤的上級標籤的兄弟標籤的下級內容標籤)
（添加內容標籤的hide樣式：內容標籤不顯示）
3.需要用到的語句
$('.i1').addClass('hide') 匹配class key=i1的標籤添加hide樣式
$('#i1').removeClass('hide') 匹配id=i1的標籤移除hide樣式
如何獲取當前標籤的下一個兄弟標籤？使用篩選器
篩選器：選擇器選擇的標籤基礎上在選擇一次，
鏈式編程：只要是jQuery對象，可以無限次.xxx() 爲標籤不斷遞加操作
格式：$(this).xxx().xxx()
$(this).next(); 獲取當前標籤的下一個兄弟標籤
$(this).prev(); 獲取當前標籤的上一個兄弟標籤
$(this).parent(); 獲取當前標籤的父標籤
$(this).children(); 獲取當前標籤的所有子標籤
$(this).silbings(); 獲取當前標籤的所有的兄弟標籤
$(this).text(); 獲取當前標籤的內容
$(this).parent().silbings().find('.comtent');
找當前標籤的父標籤的所有兄弟標籤的所有子孫標籤匹配class key=content
.find 條件查找==>標籤下的所有標籤
*/
/*
// 開始寫執行代碼（第一種方式）
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide');
// 測試返回的對象類型
var v = $(this).next().removeClass('hide');
console.log(v)
// 點擊頁面的標題標籤，在console頁面返回的對象是jQuery對象[]
// jQuery對象[]是可以 點.xxx()增加功能(稱之鏈式編程）
*/
// 開始寫執行代碼（第二種方式：鏈式編程）
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
執行結果：
橫行顯示實現（兩種方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
height:38px;
background-color: #dddddd;
line-height: 38px;
}
.menu .menu-item{
float:left;
border-right:1px solid red;
padding:0 5px;
/*
padding:間距用的 上下0 左右5px間距，
如果是內行（級聯）標籤就應該先display:block然後纔可以調padding邊距
*/
}
.active{
background-color: brown;
cursor:pointer;
/*cursor:pointer;鼠標移動到該標籤變小手*/
}
.content{
min-height:100px;
border: 1px solid #eeeeee;
/*min-height：最小邊框，高度小於100px就有滾動條*/
}
.hide{
display:none
}
</style>
</head>
<body>
<div style="width:700px;margin:0 auto">
<div class="menu">
<div class="menu-item active" a="1">菜單一</div>
<div class="menu-item" a="2">菜單二</div>
<div class="menu-item" a="3">菜單三</div>
</div>
<div class="content">
<div b="1">內容一</div>
<div class="hide" b="2">內容二</div>
<div class="hide" b="3">內容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
//匹配class="menu-item"的標籤增加click事件按鈕
$(this).addClass('active').siblings().removeClass('active');
//點擊該標籤,該標籤的就添加樣式active，然後該標籤的兄弟標籤就移除active樣式
var target = $(this).attr('a');
// 點擊該標籤獲取該標籤的a內部屬性值,如:a=1 == target=1
$('.content').children("[b='"+ target +"']").removeClass('hide').siblings().addClass('hide');
//匹配class="content"的標籤下的所有子標籤並且匹配拼接內部屬性值的子標籤，
// 移除樣式hide,該標籤的兄弟標籤增加樣式hide
// 如：children("[b='"+ target +"']") == children([b='1'])
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div style="width: 700px;margin:0 auto">
<div class="menu">
<div class="menu-item active" >菜單一</div>
<div class="menu-item" >菜單二</div>
<div class="menu-item" >菜單三</div>
</div>
<div class="content">
<div >內容一</div>
<div class="hide" >內容二</div>
<div class="hide">內容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
//匹配class="menu-item"的標籤增加click事件按鈕
$(this).addClass('active').siblings().removeClass('active');
//點擊該標籤,該標籤的就添加樣式active，然後該標籤的兄弟標籤就移除active樣式
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
//匹配class="content"的標籤下的所有子標籤的索引（下標）匹配=等於點擊的標籤的索引的子標籤，
// 移除該子標籤的hide樣式，且該標籤的兄弟標籤增加hide樣式
//$('.content').children().eq($(this).index())
// 拆分的話：
// var v = $(this).index(); 獲取點擊的標籤的下標（索引）
// $('.content').children().eq(v);獲取匹配標籤的所有子標籤的下標（索引）等於點擊標籤的下標（索引）
});
</script>
</body>
</html>
執行結果：
模態框
DOM實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
/*display:none；不顯示該標籤*/
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
/*
position:fixed； 固定頁面某個位置，（多層，這裏第二層）
left: 0;top: 0;right: 0;bottom: 0; 覆蓋全背景層（第一層）
background-color: black; 背景顏色：黑色
opacity: 0.6;透明度
z-index: 9; 層優先級，越大越上層
*/
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
/*
width: 500px;height: 400px; 該標籤的寬度高度
position:fixed； 固定頁面某個位置，（多層，這裏第三層）
background-color: white; 背景顏色:白色
left: 50%; top: 50%;margin-left: -250px;margin-top: -200px; 該標籤居中
z-index: 10; 層優先級，越大越上層
*/
</style>
</head>
<body style="margin: 0;">
<div>
<input type="button" value="添加" onclick="ShowModel();" />
</div>
<!-- 遮罩層開始 -->
<div id="i1" class="c1 hide"></div>
<!-- 遮罩層結束 -->
<!-- 彈出框開始 -->
<div id="i2" class="c2 hide">
<p><input type="text" /></p>
<p><input type="text" /></p>
<!--文本輸入框-->
<p>
<input type="button" value="取消" onclick="HideModel();"/>
<!-- onclick="HideModel();"點擊該添加按鈕就調用的HideModel()函數-->
<input type="button" value="確定"/>
</p>
</div>
<!-- 彈出框結束 -->
<script>
function ShowModel(){
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
/*
獲取id=i1的標籤並且去掉該標籤的class屬性的value:hide
獲取id=i2的標籤並且去掉該標籤的class屬性的value:hide
*/
function HideModel(){
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
/*
獲取id=i1的標籤並且增加該標籤的class屬性的value:hide
獲取id=i2的標籤並且增加該標籤的class屬性的value:hide
*/
</script>
</body>
</html>
執行結果：
點擊添加
jQuery實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
z-index: 9;
}
/*
position:fixed;指定位置覆蓋
z-index:int;疊成層優先級數字越大越上層
*/
</style>
</head>
<body>
<a onclick="addElement();">添加</a>
<table border="1" id="tb">
<tr>
<td target="hostname">1.1.1.11</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">編輯</a> | <a class="del">刪除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.12</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">編輯</a> | <a class="del">刪除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.13</td>
<!--target：自己定義的屬性-->
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">編輯</a> | <a class="del">刪除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.14</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">編輯</a> | <a class="del">刪除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text" />
<input name="port" type="text" />
<input name="ip" type="text" />
</div>
<div>
<input type="button" value="取消" onclick="cancelModal();" />
<input type="button" value="確定" onclick="confirmModal();" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
/*需求分析（添加）
點添加按鈕的時候我們就需要彈框出來，並且可以輸入，輸入後點擊確認就添加完畢
*/
function addElement(){
$(".modal,.shadow").removeClass('hide');
/*匹配class key=modal 或者class key = shadow 的標籤移除掉樣式hide
,號：只要匹配哪個都行 空格：匹配第一個關鍵字的標籤下匹配關鍵字的子標籤*/
}
/*需求分析（取消）
點彈出框的取消按鈕我們就需要把彈出框給隱藏了,
並且需要把用戶輸入的編輯的字符串也清空掉
*/
function cancelModal() {
$(".modal,.shadow").addClass('hide');
// 匹配class key=modal 或者class key = shadow 的標籤添加樣式hide
$('.modal input[type="text"]').val("");
//
}
/*需求分析（確定）
點彈出框的確定按鈕，就可以把用戶輸入的內容生成tr標籤添加到table標籤裏面
然後模態對話框關閉掉
*/
function confirmModal() {
var tr = document.createElement('tr');
// 創建一個tr標籤且賦值到tr
var td1 = document.createElement('td');
// 創建一個td標籤fi賦值到td1
td1.innerHTML = "11.11.11.11";
//td1標籤增加內容
var td2 = document.createElement('td');
td2.innerHTML = "8001";
//同理
$(tr).append(td1);
$(tr).append(td2);
// tr標籤內部追加兩個td子標籤
$('#tb').append(tr);
//匹配id=tb的標籤的子標籤後面追擊該tr標籤
$(".modal,.shadow").addClass('hide');
//匹配class="modal" 或"shadow" 的 標籤增加樣式hide
}
/*需求分析(編輯）
點編輯的時候我們就需要彈框出來，
本身需要被編輯的內容需要賦值到模態對話框的相對應輸入框，這纔可以做修改：
如本html:如：tr標籤的所有td子標籤的內容：如<td>內容</td>都需要循環取出，
並且把取出的值，分別賦值到模態對話框的相對應輸入框。
*/
$(".edit").click(function(){
$(".modal,.shadow").removeClass('hide');
//匹配class key=edit的標籤綁定click按鈕
var tds = $(this).parent().prevAll();
//獲取該點擊標籤的父標籤的所有兄弟標籤，賦值到tds
/*
var port = $(tds[0]).text();
//獲取tds下標0的元素（第一個標籤）的內容賦值到port
var host = $(tds[1]).text();
//獲取tds下標1的個元素（第二個標籤）的內容賦值到port
console.log(host,port);
$('.modal input[name="hostname"]').val(host);
//獲取匹配class key=modal標籤的子標籤匹配input標籤內部屬性name="hostname"的標籤修改value=host變量
$('.modal input[name="port"]').val(port);
});
*/
//由於在每個td增加了自定義屬性所以可以更加簡單實現上面賦值到輸入框
tds.each(function(){
//循環tds列表的標籤
var n = $(this).attr('target');
// 獲取每個標籤內部屬性target的值
var text = $(this).text();
// 獲取每個標籤的內容
var a1 = '.modal input[name="';
var a2 = '"]';
// '內容'單引號裏面的內容是字符串
var temp = a1+ n + a2;
/*
拼接模式
a1+a2 == .modal input[name=""]
假如n獲取的該標籤target屬性是hostname的話
a1+n == '.modal input[name="hostname'
a1+n+a2 == '.modal input[name="hostname"]'
temp = '.modal input[name="hostname"]'
有了拼接模式以後，增加td標籤選項的話就無需動JS了
*/
$(temp).val(text)
// 修改了匹配class key=modal標籤下的匹配input且屬性name="hostname"的子標籤的value屬性的值
})
});
/*需求分析(刪除）
點刪除的時候刪除按鈕同一行的該tr標籤（行）就被刪除掉
*/
$('.del').click(function(){
$(this).parent().parent().remove();
})
</script>
</body>
</html>
執行結果：
點擊添加