DOM（二）-09-(示例-创建表格-指定行列)

来源：互联网发布：网络舆论的影响答案编辑：程序博客网时间：2024/06/11 00:55

表格样式table.css代码

@CHARSET "UTF-8";table{border:##249bdb 1px solid;width:500px;border-collapse:collapse;}table td{border:#249bdb 1px solid;padding:5px;/*td左边顶格*/}

主程序代码：

<!--前一个视频讲解了如何创建5行6列的表格，那么这里需要再次升级，即由用户指定表格的行和列--><html><head><style type="text/css">@import url(table.css);</style></head><body><script type="text/javascript">function createTable(){var oTabNode = document.createElement("table");/*获取用户在文本框中输入的行和列，为保险起见，用parseInt将获取到的字符串转成整数，因为用户在文本框输入5，这个5100%是字符串*/var rowVal = parseInt(document.getElementsByName("rownum")[0].value);var colVal = parseInt(document.getElementsByName("colnum")[0].value);//value是input的一个属性//在获取用户输入的行和列之前，通常需要做健壮性判断，比如用户输入的值必须在一个范围之内for(var x=1;x<=rowVal;x++){var oTrNode = oTabNode.insertRow();for(var y=1;y<=colVal;y++){var oTdNode = oTrNode.insertCell();oTdNode.innerHTML = x + "--" + y;}}document.getElementsByTagName("div")[0].appendChild(oTabNode);document.getElementsByName("crtBut")[0].disabled = true;}</script><!-- 设置输入文本框，由用户指定行和列 -->行：<input type="text" name="rownum"> 列：<input type="text" name="colnum"><input type="button" value="创建表格"  name="crtBut" onclick="createTable()" /><hr/><div></div></body></html>

0 0