表格隔行變色功能（原生JS和jequery 代碼）

時間 2019-11-20

標籤表格隔行變色功能原生 jequery 代碼欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../jquery-1.3.1.js"></script> <script> /* * 表格隔行變色原生js代碼 */ /* window.onload=function(){ var tab=document.getElementById("table"); var tr=tab.getElementsByTagName("tr"); for(var i=0;i<tr.length;i++){ if(i%2==1){ tr[i].style.background="red"; }else{ tr[i].style.background="green"; } } }*/ /** * jequery 實現表格隔行變色 */ $(function(){ $('#table tr').filter(':even').css('background','red'). end().filter(':odd').css('background','green'); }); </script> </head> <body> <div> <table id="table"> <tr> <td>fdfd</td><td>fdfdfd</td> </tr> <tr> <td>fdfd</td><td>fdfdfd</td> </tr> <tr> <td>fdfd</td><td>fdfdfd</td> </tr> <tr> <td>fdfd</td><td>fdfdfd</td> </tr> </table> </div> </body> </html>

相關標籤/搜索