javascript制作表格(JavaScript实现动态表格效果)
类别:编程学习 浏览量:2301
时间:2021-10-23 10:30:22 javascript制作表格
JavaScript实现动态表格效果本文实例为大家分享了JavaScript实现动态表格效果的具体代码,供大家参考,具体内容如下
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> .bigli{ width: 600px; margin: 50px auto; } table{ border: solid black 2px; width: 500px; /*边框会合并为一个单一的边框*/ border-collapse: collapse; } th{ background-color: darkgray; /*表头字体加粗*/ font-weight: bold; /*字体颜色 #ffffff:白色*/ color: #ffffff; } th,td{ border: 1px solid black ; /*指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度*/ box-sizing: content-box; text-align: center; /*指定宽高*/ width: 50px; height: 30px; font-size: 14px; } .but{ width: 150px; margin: 5px 400px; /*让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容*/ display: flex; /*在弹性盒对象的 <li> 元素中的各项周围留有空白*/ justify-content: flex-end; } </style> </head> <body> <li class="bigli"> <table align="center"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>联系电话</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>逍遥</td> <td>18</td> <td>男</td> <td>12354546</td> </tr> <tr> <td>2</td> <td>小白</td> <td>19</td> <td>女</td> <td>252323523</td> </tr> </tbody> </table> <li class="but"> <button type="button" onclick="addRow()">添加一行</button> <button type="button" onclick="saveData()">保存数据</button> </li> </li> <script> var id; var name; var age; var sex; var phone; var tdArr=new Array(); function addRow() { let tbodyObj = document.getElementsByTagName("tbody")[0]; let trObj = document.createElement("tr"); tbodyObj.appendChild(trObj); //创建5个td for (let i = 0; i < 5; i++) { let tdObj = document.createElement("td"); trObj.appendChild(tdObj); //创建input输入框对象 let inputObj = document.createElement("input"); //设置input对象的id属性 inputObj.setAttribute("id",i); //为每一个输入框添加一个失去焦点事件 inputObj.addEventListener("blur",function () { switch (this.id) { case "0": id=this.value; break; case "1": name=this.value; break; case "2": age=this.value; break; case "3": sex=this.value; break; case "4": phone=this.value; break; } }); //隐藏未点击输入时的input边框 inputObj.style.border="0"; //隐藏点击输入时的边框 inputObj.style.outline="none"; //设置输入框宽度 inputObj.style.width="80px"; //设置输入框高度 inputObj.style.height="25px"; //设置输入框的外边距为0 inputObj.style.margin="0"; //将td添加 tdObj.appendChild(inputObj); //将tdObj添加到tdArr中 tdArr.push(tdObj); } } function saveData() { tdArr[0].innerHTML=id; tdArr[1].innerHTML=name; tdArr[2].innerHTML=age; tdArr[3].innerHTML=sex; tdArr[4].innerHTML=phone; tdArr.length=0; } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- 微信js开发教程(微信JSSDK分享功能图文实例详解)
- Extjs中grid 的ColumnModel 属性配置
- js截取字符串
- js event对象
- js RegExp用法
- SQLServer中JSON文档型数据的查询问题解决(SQLServer中JSON文档型数据的查询问题解决)
- nodejs数据采集(nodejs获取表单数据的三种方法实例)
- js实现自动轮播(原生js封装无缝轮播功能)
- js如何解决iphone异形屏适配(Html5适配iphoneX刘海屏的简单实现)
- js脚本语言原理(实例说明js脚本语言和php脚本语言的区别)
- js网页截图(JS如何实现页面截屏功能实例代码)
- php多维数组怎么转换json(php实现的数组转xml案例分析)
- 微信浏览器中JS实现返回操作
- JS动态操作select的option
- python pdf文件操作(Python常见读写文件操作实例总结文本、json、csv、pdf等)
- 萌娃唱《白龙马》走红,那生动的小表情,网友直呼 简直是戏精(萌娃唱白龙马走红)
- 朱鹤松被不断认可,凤凰传奇玲花喊话岳云鹏,索要老朱演出门票(朱鹤松被不断认可)
- 元宵晚会槽点多,芒果台上来就假唱,岳云鹏不说相声改评书了(元宵晚会槽点多)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
- Top 3 JSHS《运动与健康科学 英文 》跻身SCI体育学期刊世界前三(Top3JSHS运动与健康科学)
热门推荐
- 面试中如何给人留下好印象
- react路由组件怎么用(无废话快速上手React路由开发)
- python中字符串截取规则(Python中的字符串切片截取字符串的详解)
- docker容器无法启动(Docker 无法停止或删除容器服务问题的解决方案)
- shell监控docker各种状态(如何监控docker容器运行状态 shell 脚本)
- phpstudy的默认网站根目录是什么(phpstudy v8.0创建本地站点域名教程图文)
- pythonsocket编写web服务器(局域网内python socket实现windows与linux间的消息传送)
- js轮播图片(JS实现简单图片轮播效果)
- mysql中常用的三种存储引擎的区别(MySQL 存储过程的优缺点分析)
- python 队列与列表(Python实现的栈、队列、文件目录遍历操作示例)