<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
/*使用在线js包的情况下需要写jquery 和angular的js包*/
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
$(document).ready(function(){
//更改背景
$("tbody tr:odd").css("background-color","red");
$("tbody tr:even").css("background-color","greenyellow");
var a="";
$("tbody tr").mouseenter(function(){
a= $(this).css("background-color")
$(this).css("background-color","#EE82EE");
});
/*,function(){
$("tbody tr:odd").css("background-color","red");
$("tbody tr:even").css("background-color","greenyellow");
});*/
$("tbody tr").mouseleave(function(){
$(this).css("background-color",a);
})
/*判断表格中是否有东西 如果没有的话将表格隐藏*/
$("button").click(function(){
$(this).parent().parent().remove();
var se=$("tbody").children("tr");
console.log(se.length);
if (se.length==0){
$("table")[0].style.display="none";
}
});
});
</script>
</head>
<body>
<table border="1" style="text-align: center; width: 600px;">
<thead>
<tr><td>姓名:</td>
<td>年龄:</td>
<td>性别:</td>
<td>操作:</td>
</thead>
<tbody>
</tr>
<tr><td>张三</td>
<td>15</td>
<td>男</td>
<td><button>删除</button></td>
</tr>
<tr><td>李四</td>
<td>16</td>
<td>女</td>
<td><button>删除</button></td>
</tr>
<tr><td>王五</td>
<td>18</td>
<td>女</td>
<td><button>删除</button></td>
</tr>
<tr><td>赵六</td>
<td>10</td>
<td>女</td>
<td><button>删除</button></td>
</tr>
</tbody>
</table>
</body>
</html>
高亮显示+删除
最新推荐文章于 2021-08-10 12:02:31 发布