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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- phpstudy 目录浏览宽度(JspStudy如何设置PHP根目录可编辑)
- js验证身份证号
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- js项目经验(JS实现扫雷项目总结)
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- js实现继承的五种(JavaScript继承的三种方法实例)
- JS函数前面感叹号的作用
- thinkphp框架实例(ThinkPHP框架整合微信支付之JSAPI模式图文详解)
- JS中instanceof与typeof的区别有哪些
- ExtJs中getCmp、getDom、Get的区别
- python pdf文件操作(Python常见读写文件操作实例总结文本、json、csv、pdf等)
- extjs table布局
- 使用Console命令调试JS
- js函数对象
- 动画用css3还是js(前端制作动画的几种方式css3,js)
- js实现分页
- 中华第一楷 张瑞龄 86岁高龄,苦练楷书71年,一幅字卖593万(中华第一楷张瑞龄)
- 冯骥才 年意(冯骥才年意)
- ()
- 百事大吉蓝底 绿底手机高清壁纸(绿底手机高清壁纸)
- 蓝底证件照怎么制作 证件照换底色 换尺寸快速搞定(蓝底证件照怎么制作)
- 你喜欢足球吗 足球如何点亮世界的(足球如何点亮世界的)
热门推荐
- dedecms织梦阁模板(dedecms英文模板 英文网站程序的选择)
- dedecms授权协议(360提示DedeCms全局变量覆盖漏洞临时解决方法)
- mysql里修改密码命令(MySQL修改账号密码方法大全小结)
- js setTimeout
- vue左右滑动切换(vue实现界面滑动效果)
- laravel 获取数据库操作异常(Laravel Eloquent ORM 多条件查询的例子)
- sqlserver触发器修改当前字段(利用SQL Server触发器实现表的历史修改痕迹记录)
- escape()、encodeURI()、encodeURIComponent()区别
- 如何认识服务器(关于Nginx、Apache、Tomcat三个WEB服务器的区别和认知)
- docker同步宿主机配置(docker容器间跨宿主机通信-基于overlay的实现方法)