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"便于添加表格
<script>
</script>
</body>
</html>
通过用户输入行列数,动态创建表格
<!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>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享