<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>赵伟博day9日考</title>
<style type="text/css">
table{
width: 300px;
text-align: center;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
//奇数行背景颜色
$("table tr:odd").css("background","green");
//偶数行背景
$("table tr:even").css("background","red");
//删除按钮点击事件
$("button").click(function(){
//获取按钮的父节点的父节点删除
$(this).parent().parent().remove();
$("table tr:odd").css("background","green");
$("table tr:even").css("background","red");
});
$("tr").mouseenter(function(){
$(this).css("opacity",1).siblings().css("opacity",0.2);
});
$("table").mouseleave(function(){
$("tr").css("opacity",1);
});
})
</script>
</head>
<body>
<form>
<table border="1px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td>张三</td>
<td>21</td>
<td>男</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>女</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>王五</td>
<td>21</td>
<td>女</td>
<td><button>删除</button></td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>赵伟博day9日考</title>
<style type="text/css">
table{
width: 300px;
text-align: center;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
//奇数行背景颜色
$("table tr:odd").css("background","green");
//偶数行背景
$("table tr:even").css("background","red");
//删除按钮点击事件
$("button").click(function(){
//获取按钮的父节点的父节点删除
$(this).parent().parent().remove();
$("table tr:odd").css("background","green");
$("table tr:even").css("background","red");
});
$("tr").mouseenter(function(){
$(this).css("opacity",1).siblings().css("opacity",0.2);
});
$("table").mouseleave(function(){
$("tr").css("opacity",1);
});
})
</script>
</head>
<body>
<form>
<table border="1px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td>张三</td>
<td>21</td>
<td>男</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>女</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>王五</td>
<td>21</td>
<td>女</td>
<td><button>删除</button></td>
</tr>
</table>
</form>
</body>
</html>