js for 循环table标签

js for 循环table标签今天哥哥教了一个 x table 的循环

大家好,欢迎来到IT知识分享网。

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

      <table>

<tr>

<td></td>

</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>

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/144219.html

(0)
上一篇 2025-04-28 13:10
下一篇 2025-04-28 13:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信