JavaScript 动态生成表格 案例
功能描述
在输入框中输入行和列,点击按钮,生成拥有对应行和列的表格。如下图所示:
分析
HTML界面设计
<body>行:<input type="text" id="row" /> 列: <input type="text" id="col" /><input type="button" name="go" id="go" value="go" onclick="add()" /><br /><br /><div id="table"> </div> </body>
js代码部分:
- 先得到输入的行和列的值
var row = document.getElementById("row").value; var col = document.getElementById("col").value;
- 生成表格,新建一个字符串str,把表格的html代码追加进去,先循环行,再循环列,生成一个一个的单元格。
var str += '<table border="1" >'; for(var i = 0; i < row; i++) {str += '<tr>';for(var j = 0; j < col; j++) {str += '<td height="30px" width="100px"></td>';}str += '</tr>'; } str += '</table>';
- 获取上面的盛放表格的盒子对象,并向里面添加内容。
var divobj = document.getElementById("table"); divobj.innerHTML = str;
代码
<body>行:<input type="text" id="row" /> 列: <input type="text" id="col" /><input type="button" name="go" id="go" value="go" onclick="add()" /><br /><br /><div id="table"> </div>
</body><script type="text/javascript">function add() {var row = document.getElementById("row").value;var col = document.getElementById("col").value;//alert(row + "*" + col);var str = "";//alert(str);str += '<table border="1" >';for(var i = 0; i < row; i++) {str += '<tr>';for(var j = 0; j < col; j++) {str += '<td height="30px" width="100px"></td>';}str += '</tr>';}str += '</table>';var divobj = document.getElementById("table");divobj.innerHTML = str;}
</script>
JavaScript 动态生成表格 案例相关推荐
- 利用Javascript动态生成表格的小demo
利用Javascript动态生成表格的小demo 利用Javascript中data数据库存储内容动态生成表格,点击删除可对整行内容进行删除 <!DOCTYPE html> <htm ...
- 动态生成表格案例(HTML+CSS+JS)
在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除. 实现思路为:先创建一个表格和一个表单,将表单中输入的 ...
- JavaScript-178:动态生成表格案例
效果图 结构 <table><thead><tr><th>姓名</th><th>科目</th><th>成 ...
- javascript案例:动态生成表格
js案例:动态生成表格 一.文字梳理 * 创建一个页面:两个输入框和一个按钮 * 第一步:得到输入的行和列的值 * 第二步:生成表格 - 循环行 - 在行里面循环单元格 * 第三步:把表格(表格放到变 ...
- JavaScript基础学习 动态生成表格
JavaScript基础学习 动态生成表格 根据我们拥有的数据来动态创建表格的行和列,以及实现删除行的操作 <!DOCTYPE html> <html lang="en&q ...
- WebAPI(part10)--动态生成表格
学习笔记,仅供参考,有错必究 文章目录 动态生成表格 动态生成表格 从本地取到数据,动态生成表格,并添加删除操作. 代码: <!DOCTYPE html> <html>< ...
- django通过ajax请求接口返回多条数据,并动态生成表格,请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
- js动态生成表格【含合并单元格的表格】
最近遇到需求,动态生成表格,类似Excel,支持合并单元格的表格,代码分享给大家~ 一.网上找到的简单生成表格的例子: 以下是生成规则表格m行*n列类似,可以直接打开HTML查看结果. <!DO ...
- JSON格式化 动态生成表格 表格转置 行列转换 Excel导出
先看效果 初始化: JSON格式化 : 生成表格-方式1 : 生成表格-方式2 : Excel导出 需要行求和.列求和功能的查看 JSON格式化 动态生成表格 表格转置 行列转换 Excel导出 行求 ...
- 一段动态生成表格的JSP代码讲解
一段动态生成表格的JSP代码讲解 <table border="1" width="600px" align="center"> ...
最新文章
- python中的tuple_python 数据类型 - tuple
- 负载均衡的几种常用方案
- 嵌入式linux编译环境搭建,嵌入式Linux之旅——环境搭建篇之交叉编译工具的安装...
- python异步和多线程_Python 异步 IO(asyncio)、多进程、多线程性能对比
- VB 利用fso 枚举文件和文件夹
- c语言,指针与数组--指针与二维数组2
- 暗战 惠普再掀市场风云
- 转换到coff期间_Visual Studio转换到coff期间失败该怎么解决?
- python和前端哪个好_web前端和python学哪个出来工资高?
- 关于浮点误差,1为何变成0.999999 ?
- 多任务Mask2Former | 性能优于任务特定模型(CVPR 2022)
- java发送邮件连接超时,Java邮件超时和连接超时处理
- java 图文验证码
- Maven-POM.xml
- 查看并修改Linux主机名命令hostname
- Java 泛型类、泛型方法和泛型接口
- Ubuntu 命令(随时更新)
- 网络祭祀网站源码网上祭扫平台在线祭祀祭拜网上纪念馆扫墓phpcms网上墓园手机版源
- mt6355功率设计注意事项 [仅为mt6758]
- Tekla钢结构二次开发 第5节正交梁、螺旋梁以及工作平面