您的位置:首页 > Web前端 > JavaScript

JavaScript强化教程-动态实现创建row行col列的表格

2016-06-07 16:39 706 查看
点击获取更多JavaScript强化教程

通过用户输入行列数,动态创建表格

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>
<body>

创建文本输入框,接受用户输入的行列数 并且创建table id="ta"便于添加表格

行:<input type="text" id="1">
列:<input type="text" id="2">
<input type="button" onclick="fun1()" value="创建"><span style="color:#ff0000;"> //入口,当我们输入完行列数,点击调用函数fun1()</span>
<table border="1" style="width: 500px;height: 500px;" id="ta">
<!--<tr>-->
<!--<td>-->
<!--</td>-->
<!--</tr>-->
</table>


<script>

//4.举例定义函数通过用户输入动态实现创建row行col列的表格
//假设 3行3列
var table = document.getElementById("ta");

//开始创建 str累加所有的字符串  把 <tr><td></td>...</tr>加到一起
function createTable(col,row){
var str = "";
for(var n=0;n<col;n++){
str = str + "<tr>";//创建行
for(var i=0;i<row;i++){
str = str + "<td></td>";
}
str = str + "</tr>";
}
table.innerHTML = str;//然后全部添加到table中

}

var obj = createTable; //对象可以指向函数
<span style="color:#ff6666;">
//fun1获得我们的 行列数,切记不要讲tr td定义在函数外,只有当我们输入完行列数,调用fun1的时候才调用tr td,否则初始就为零,点击按钮后不会被调用
</span>    function fun1(){
var tr = document.getElementById("1").value;
var td = document.getElementById("2").value;
obj(tr,td); //利用 只想函数的对象进行 创建表格的函数调用
}


</script>

</body>

</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript