話不多說，直接上代碼`
<body>
<div class="container-fluid container-fluid-bl">
<div class="row">
<div class="col-2 tab-dark">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading tab-dark" role="tab" id="headingOne">
<h4 class="panel-title panel-title-bl tab-dark">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
訂單中心
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse darks" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body panel-bl">
<ul>
<li>我的訂單</li>
<li>我的活動</li>
<li>評價曬單</li>
<li>我的常購商品</li>
<li>代下單</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading tab-dark" role="tab" id="headingTwo">
<h4 class="panel-title panel-title-bl">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
關注中心
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse darks" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body panel-bl">
<ul>
<li>關注的商品</li>
<li>關注的店鋪</li>
<li>關注的專輯</li>
<li>收藏的內容</li>
<li>關注的活動</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading tab-dark" role="tab" id="headingThree">
<h4 class="panel-title panel-title-bl">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
資產中心
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse darks" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body panel-bl">
<ul>
<li>小金庫</li>
<li>京東白條</li>
<li>領貨碼</li>
<li>餘額</li>
<li>紅包</li>
<li>銀行卡</li>
<li>優惠卷</li>
<li>禮品卡</li>
<li>京東</li>
<li>京東鋼鏰</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading tab-dark" role="tab" id="headingFour">
<h4 class="panel-title panel-title-bl">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
特色業務
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse darks" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body panel-bl">
<ul>
<li>我的營業廳</li>
<li>京東通信</li>
<li>定期購</li>
<li>我的回收單</li>
<li>節能補貼</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-8">
<div class="order">
<span>我的訂單</span>
<nav class="navbar navbar-light bg-light form-bl">
<form class="form-inline">
<input class="form-control mr-sm-2 Search">
<button class="btn btn-outline-success " id="Search">Search</button>
<button class="cancel">cancel</button>
</form>
</nav>
<span><button type="button" class="btn btn-success add-bl" data-toggle="modal" data-target="#staticBackdrop">Add</button></span>
<!-- Add Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"></th>
<td><input type="text" id="add_name"></td>
<td><input type="text" id="add_address"/></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary ADD">ADD</button>
</div>
</div>
</div>
</div>
<!--Change Modal-->
<div class="modal fade" id="Change" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="Change" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body changeModal">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
<tr>
<td id="changename"><input type="text"></td>
<td id="changeaddress"><input type="text"></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary Change_qd">確定</button>
</div>
</div>
</div>
</div>
</div>
<div class="order-contain">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">operation</th>
</tr>
</thead>
<tbody>
<tr>
<td class="thisname">Huawei nova5z</td>
<td class="thisaddress">河南省周口市</td>
<td>
<button type="button" class="btn btn-success Changes" data-toggle="modal" data-target="#Change">Change</button>
<button type="button" class="btn btn-danger Delete">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="js/background.js"></script>
</body>
body{
background: rgb(227, 228, 229);
}
.col-2{
width: 15%;
float: left;
height: 100%;
}
.col-8{
width: 85%;
float: left;
}
.container-fluid-bl{
padding: 0;
}
.tab-dark{
background: rgb(32, 34, 42)!important;
margin: 0!important;
color: white!important;
}
.panel{
border: none;
}
.panel-body{
border-top-color: black!important;
}
.darks{
background: rgb(22, 24, 29);
}
.panel-bl li{
list-style: none;
cursor: pointer;
margin: 5px 0;
}
.panel-title-bl{
font-size: 14px;
}
.order{
width: 100%;
background: white;
padding-left: 20px;
height: 50px;
line-height: 50px;
}
.nav-bl{
background: white;
}
.order span{
float: left;
}
.form-bl{
width:500px;
float: left;
margin-left: 410px;
}
.cancel{
outline: none;
border: none;
height: 40px;
width: 50px;
line-height: 40px;
}
$(function(){
function Del(){
var tr=this.parentNode.parentNode;
var tip=confirm("你確定要刪除嗎?");
if(tip){
tr.parentNode.removeChild(tr);
}
return false;
}
var Delete=document.getElementsByClassName("Delete");
for (var i = 0; i < Delete.length; i++) {
Delete[i].onclick=Del;
}
var addArr=[];
var tbody;
$(".ADD").click(function (){
addArr=[]
var tr=document.createElement("tr")
tbody=document.getElementsByClassName("order-contain")[0].getElementsByTagName("tbody")[0];
$(this).parent().siblings().find("input").each(function(){
addArr.push($(this).val())
})
tr.innerHTML="<td>"+addArr[0]+"</td>"+
"<td>"+addArr[1]+"</td>"+
"<td><button type='button' class='btn btn-success Changes' data-toggle='modal' data-target='#Change'>Change</button> <button type='button' class='btn btn-danger Delete'>Delete</button></td>";
tbody.appendChild(tr);
var DelButton=tr.getElementsByTagName("button")[1];
var ChangeButton=tr.getElementsByTagName("button")[0];
ChangeButton.onclick=change;
DelButton.onclick=Del;
$('#staticBackdrop').modal('hide');
$('#staticBackdrop').find("input").val('');
});
var arrChange=[];
var Athis=null;
function change(){
arrChange=[]
Athis=$(this).parents("tr");
$(this).parent().siblings().each(function() {
arrChange.push($(this).text())
})
$(".changeModal input").each(function(i){
$(this).val(arrChange[i])
})
}
//獲取修改的值
$(".Changes").click(function(){
arrChange=[]
Athis=$(this).parents("tr");
$(this).parent().siblings().each(function() {
arrChange.push($(this).text())
})
$(".changeModal input").each(function(i){
$(this).val(arrChange[i])
})
});
//修改原來的值爲修改後的值
$(".Change_qd").click(function(){
arrChange=[]
$(this).parent().siblings().find("input").each(function(){
arrChange.push($(this).val())
})
Athis.find("td").each(function(i){
$(this).text(arrChange[i])
})
$('#Change').modal('hide');
});
//
var storageName=[];
var storage=[];
var index=0;
var searchthing;
$("#Search").click(function(){
storageName=[]
storage=[]
$(".order-contain tbody tr>td:nth-child(1)").each(function(){
//把列表全部數據存到一個數組裏
storageName.push($(this).text())
});
$(".order-contain tbody tr").each(function(){
storage.push($(this)[0])
})
//判斷搜索的內容是否存在
if(storageName.indexOf($(".Search").val()) > -1){
index=storageName.indexOf($(".Search").val());
$(".order-contain tbody tr").eq(index).siblings().remove();
return false;
}else{
alert("沒有查詢到您要查詢的信息")
return false;
}
});
$(".cancel").click(function(){
for (var i = 0; i < storage.length; i++) {
tbody.appendChild(storage[i])
}
return false;
})
});