纯js代码输出表格

本实例是纯粹以javascritp代码输出表格。包含的主要知识点有:

1、以if条件语句对表格进行隔行变色。

2、以for循环嵌套输出表格的行与列

3、自定义一个带参数的函数,能输出任意行列数的表格

以下放出具体代码,请参考:

<h1>想让表格更好看,可自己添加css样式。</h1>
	<script>
		document.write("<table border=1>");//这是输出表格的开始标签,并把表格边框大小设为1
		
		//定义一个能输出任意行数与列数的表格函数
		function addtable(row,col){//addtable 是函数名;row 是形参,为表格的行数;col 是另一个形参,为表格的列数
			for(var i=0;i<row;i++){//这是输出表格行数"<tr></tr>"的循环
				//此if条件语句让表格隔行变色
				if(i%2==0){//i为偶数不改变
					document.write("<tr>");
				}else{//i为奇数改变背景色
					document.write("<tr style='background:#f00;'>");
				}
				
				for(var j=0;j<col;j++){//这是输出表格列数"<td></td>"的嵌套循环
					document.write("<td>第"+(i+1)+"行第"+(j+1)+"列</td>");//这是显示第几行第几列
				}
				document.write("</tr>");
			}
		}
		addtable(6,7);//调用函数,并代入实参:6行7列。(实参可根据情况自由调节)
		
		document.write("</table>");//这是输出表格的结束标签
	</script>

效果图:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:
顶部