jQuery 列表表格分奇偶列變色
阿新 • • 發佈：2021-08-24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } table { border-collapse: collapse; } td { width: 100px; height: 40px; } </style> </head> <body> <table border="1"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <script src="js/jquery-1.12.4.min.js"></script> <script> // 選中偶數的列，變色 // $("td:even").css("background","skyblue") // 可以將每一行作為單獨操作單位，讓每一行中的列進行隔列變色 // 我們一提到對某個元素內部或內部的子元素進行一些操作，首先想到 each 方法 // var $tr = $("tr"); // $tr.each(function () { // // 讓子級所有的列隔列變色 // $(this).children(":odd").css("background","skyblue") // }) // 方法2 $("td").each(function () { // 可以判斷 當前這個 td 在父級中所處的位置 // index() 獲取的是兄弟之間的下標 if ($(this).index() % 2 === 0) { $(this).css("background","skyblue") } }) </script> </body> </html>