（全选，取消，反选）
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>执行结果：
点击添加