<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通讯录</title>
<link rel="stylesheet" href="./css/style.css">
<!-- 引入jq库 -->
<!-- <script src="_____(1)______"></script> -->
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="box">
<!-- 表格居中 -->
<!-- <table ___(2)___="center"> -->
<table align="center">
<!-- 表格标题 -->
<!-- <___(3)____>通讯录</___(3)____> -->
<caption>通讯录</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>13754448888</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>13788889999</td>
<td>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<button class="add">添加一行</button>
</div>
</body>
</html>
.box{
width: 400px;
margin:30px auto;
text-align: center;
}
.box>button{
width: 100%;
height: 40px;
margin-top:20px;
border:none;
border-radius: 10px;
background-color: green;
color:#fff;
}
table{
width:400px;
text-align:center;
/*边框重叠*/
/* _____(4)_______; */
border-collapse: collapse;
}
table caption{
height: 60px;
line-height: 60px;
font-weight: 600;
}
table th{
background-color: #f5f5f5;
}
table,td,th{
border:1px solid #ccc;
}
table tr{
height:50px;
}
$(function(){
// 添加行 绑定点击事件
// $(".add").___(5)____(function(){
$(".add").click(function(){
var newTr=$("<tr></tr>");
for(i=0;i<$("thead>tr>th").length;i++){
newTd=$("<td></td>");
if(i==0){
newTd.text($("tbody>tr").length+1);
}
if(i==$("thead>tr>th").length-1){
//设置标签内容
// newTd.__(6)____("<button>删除</button>")
newTd.html("<button>删除</button>");
}
//追加节点
// newTd.__(7)_____(newTr);
newTd.appendTo(newTr);
};
$("tbody").append(newTr);
changeColor();
})
// 隔行换色
function changeColor(){
$("tbody tr:odd").css("background","#f5f5f5");
$("tbody tr:even").css("background","#fff");
}
changeColor();
// 删除行
// $("tbody").____(8)___("click","button",function(){
$("tbody").on("click","button",function(){
$(this).parents("tr").remove();
changeColor();
order();
});
//重新排序
function order(){
// $("tbody tr").__(9)____(function(index){
$("tbody tr").each(function(index){
// $(this).children().eq(0).text(__(10)____);
$(this).children().eq(0).text(index+1);
});
}
})
