您的位置：首页 > 其它

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

2015-08-20 17:03 393 查看

表格样式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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航