大家好,欢迎来到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