js自定义行列数的隔行变色表格效果
表格隔行变色效果是一种基础且常见的效果，用javascript实现起来感觉还挺复杂的，需通过jquery只需要一句代码就实现了，非常麻烦，但下面我们还是先说复杂的JS实现效果的写法吧。
这种效果用处不大，但是包括if判断、取余的运用还可以作为练习双层for循环和document.write()的工具。
思路如下：把<table></table>,<tr></tr>,<td></td>用document.write()输出，
把行数和列数用prompt()输入框进行输入，提高灵活性。
1、隔行变色表格js写法：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .hd{ background: seagreen; color: white; } </style> <script type="text/javascript"> // 在js语法中,字符串中间不能有换行 document.write("<table border='1' >") for (dd=1;dd<=10;dd++) { // 判断奇偶行数 if(dd%2==1){//奇数行输出 document.write("<tr class='hd'>"); } else{//偶数行输出 document.write("<tr>"); } for (ee=1;ee<=10;ee++) { document.write("<td>"+dd+"行"+ee+"列</td>"); } document.write("</tr>"); } document.write("</table>"); </script> </head> <body> </body> </html> 上面代码效果图片：
本文最后编辑：2019年08月10日
原文链接：https://www.qiquanji.com/post/7653.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知