表格隔行变色效果是一种基础且常见的效果，用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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知