표현식을 사용하여 CSS로 구현했지만 실제로 사용하는 것이 좋습니다. 리소스를 차지하며 Firefox 브라우저는 을 지원하지 않습니다. <style> .db tr{ background-color:expression('#000000,#333333,#555555,#777777,#999999,#bbbbbb,#dddddd,#ffffff'.split(',')[rowIndex%8]); } </style> <table width="500" border="1" class="db"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> [Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] 색상이 두 개만 있는 경우 <br>.db tr{ <br> background-color:expression('#abcdef,#123456'.split(',')[ rowIndex%2]); <br>} <br> <style> .db { border-collapse:collapse;} .db tr{ background-color:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); } </style> <table width="100%" border="1" class="db"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> [Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] 꼭 사용하고 싶다면 다음 js로 작성하시면 됩니다 <table id="list" width="300"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> <script type="text/javascript"> <!-- var colorArr = new Array("#ffffff","#cccccc","#999999","#666666","#333333"); var s = 0; function listDoodle() { var list = document.getElementById("list").getElementsByTagName("tr"); for (var i=0;i<list.length ;i++ ) { list[i].style.backgroundColor = colorArr[s++]; if (s==(colorArr.length-1)) { s = 0; } } } window.onload = listDoodle; //--> </script> [모두 선택하려면 Ctrl+A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] <!-- var colorArr = new Array("#ffffff","#cccccc","#999999","#666666","#333333"); var s = 0; function listDoodle() { var list = document.getElementById("list").getElementsByTagName("tr"); for (var i=0;i<list.length ;i++ ) { list[i].style.backgroundColor = colorArr[s++]; if (s==(colorArr.length-1)) { s = 0; } } } window.onload = listDoodle; //-->
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
