<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0 auto;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
//高亮顯示
$("tr").mouseenter(function(){//鼠標移上其他模糊
$(this).css("opacity",1).siblings().css("opacity",0.4);
});
//給table添加離開的事件
$("div").mouseleave(function(){
$(this).children("table").eq(0).children("tbody").children("tr").css("opacity",1);
});
//隔行變色
$("tbody tr:odd").css("background-color","red");//odd是奇數行 爲紅色
$("tbody tr:even").css("background-color","yellowgreen");//even是偶數行
//點擊刪除 刪除該行
$("button").click(function(){
$(this).parent().parent().remove();//找到父類是td,然後找到父類是tr然後移除該行
});
});
</script>
</head>
<body>
<div>
<table style="width: 400px; " border="1" id="tab">
<thead>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>張一</td>
<td>19</td>
<td>男</td>
<td><button>刪除</button></td>
</tr>
<tr>
<td>張二</td>
<td>20</td>
<td>男</td>
<td><button>刪除</button></td>
</tr>
<tr>
<td>張三</td>
<td>21</td>
<td>女</td>
<td><button>刪除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
h5表格隔行換色
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.