JavaScript实现动态表格效果
更新时间：2021年06月22日 10:14:13 作者：妄痴梦中
这篇文章主要为大家详细介绍了JavaScript实现动态表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现动态表格效果的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
.bigDiv{
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;
/*在弹性盒对象的 <div> 元素中的各项周围留有空白*/
justify-content: flex-end;
}
</style>
</head>
<body>
<div class="bigDiv">
<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>
<div class="but">
<button type="button" onclick="addRow()">添加一行</button>
<button type="button" onclick="saveData()">保存数据</button>
</div>
</div>
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
constructor 属性返回对创建此对象的数组函数的引用。本文给大家介绍JavaScript中的constructor ，需要的朋友参考下吧2016-04-04
这篇文章主要给大家介绍了关于微信小程序如何在其他页面监听globalData中值的变化的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要为大家详细介绍了js计算系统当前日期是星期几4种方法,需要的朋友可以参考下2016-07-07
这篇文章主要为大家详细介绍了js实现简单购物车模块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要为大家详细介绍了js+css3实现炫酷时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
在日常处理视频文件时常常会用到视频片段的截取功能,FFmpeg支持该功能,下面这篇文章主要给大家介绍了关于Js如何使用ffmpeg进行视频剪辑和画面截取等功能的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了创建与框架无关的JavaScript插件，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-12-12
这篇文章主要为大家详细介绍了JavaScript实现轮播图特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
下面小编就为大家带来一篇输入法的回车与消息发送快捷键回车的冲突解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家详细介绍了微信小程序实现五星评价，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论