h5表格隔行換色
阿新 • • 發佈:2019-02-09
<!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>