js for 循环table标签

最新推荐文章于 2023-04-25 11:47:17 发布

baobao768821032

最新推荐文章于 2023-04-25 11:47:17 发布

阅读量5k

点赞数 1

文章标签： js for table 循环

本文链接：https://blog.youkuaiyun.com/baobao768821032/article/details/37999635

版权

今天哥哥教了一个新的HTML标签叫table

<table>

<tr>

</tr>

</table>

tr 等于：行； td 等于：列；列在行的里面

用for 在js 里面循环table 写代码的时候一定要注意标点和字母的大小错一点点都不行的

例子

<html>
	<head>
		<meta http-equiv="Content-Tyep" content="text/html;charset=utf-8">
		<title>好烦人的表格</title>
		<style>
			.tb td{
				height:20px;
				border:1px #000000 solid;
				}
			.tb tr{
				border:1px #000000 solid;
			
			}
			
			.tb{<span style="color:#33cc00;">
				/*去掉tables</span>
				border-spacing:0px;
				border:1px #999 solid;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			<span style="color:#009900;">//定义baobao这个函数</span>
			function baobao(){
				<span style="color:#33cc00;">//定义rowInput这个函数  是由一个id叫row的对象里提取元素</span>
				var rowInput=document.getElementById("row");
				<span style="color:#33cc00;">//定义rowNum等于rowInput里面的值</span>
				var rowNum=rowInput.value;
				<span style="color:#33cc00;">//定义cloInput这个函数  是由一个id叫clo的对象里提取元素</span>
				var cloInput=document.getElementById("clo");
				<span style="color:#33cc00;">//定义cloNum等于cloInput里面的值</span>
				var cloNum=cloInput.value;
				<span style="color:#33cc00;">//定义tableHtml等于rigupTable(rowNum,cloNum)</span>
				var tableHtml=rigupTable(rowNum,cloNum);
				<span style="color:#33cc00;">//定义showDiv这个函数  是由一个id叫generate的对象里提取元素</span>
				var showDiv=document.getElementById("generate");
					<span style="color:#33cc00;">//showDiv里面的HTML内容等于tableHtml</span>
					showDiv.innerHTML=tableHtml;
			}
			<span style="color:#009900;">//定义 rigupTable(rowNum,cloNum)</span>
			function rigupTable(rowNum,cloNum){
				<span style="color:#009900;">//定义tableHtml</span>
				var tableHtml="<table class='tb'>";
					<span style="color:#009900;">//定义 rowStart=1；条件：rowStart<=rowNum；执行后再执行rowStart++</span>
					for (var rowStart=1;rowStart<=rowNum;rowStart++){
						<span style="color:#009900;">//条件满足后tableHtml追加一行</span>
						tableHtml+="<tr>";
						<span style="color:#009900;">//定义 rcloStart=1；条件：cloStart<=cloNum；执行后再执行cloStart++</span>
						for(cloStart=1;cloStart<=cloNum;cloStart++){
							<span style="color:#009900;">//追加一列</span>
							tableHtml+="<td>";
							<span style="color:#009900;">//追加rowStart+"行"+cloStart+"列"</span>
							tableHtml+=rowStart+"行"+cloStart+"列";
							tableHtml+="</td>";
						
						}
						tableHtml+="</tr>";
					}
			  
			  
				tableHtml+="</table>";
				<span style="color:#009900;">//结束返回给tableHtml</span>
				return tableHtml;
			
			}
		
		</script>
		
		
		
	
	</head>
	<body>
		<br/><br/><br/><br/>
		行数:
		<input type="text" id="row"/>
		列数:
		<input type="text" id="clo"/>
		<input type="button" value="生成" οnclick="baobao();"/>
		<br/><br/><br/><br/>
		生成区:<br/>
		<div id="generate"></div>
	
	
	</body>






</html>