js自定义行列数的隔行变色表格效果

时间：6年前阅读：5117

表格隔行变色效果是一种基础且常见的效果，用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,我们将及时处理。

微信扫码关注

更新实时通知

js自定义行列数的隔行变色表格效果

网友评论