【JavaScript】创建表格动态插入数据 |
您所在的位置：网站首页 › js输入框存入数组 › 【JavaScript】创建表格动态插入数据 |
【JavaScript】创建表格动态插入数据
|
使用JavaScript动态插入表格和数据
一、创建HTML并布置好基本格局
这里没有什么难点，基本HTML知识为了简单实现没有使用thead和tbody进行设计
学生信息表
姓名
年龄
学号
二、设置表格CSS
width是宽度，100%表示占据网页整个宽度border是table边框border-style是边框样式，dotted表示虚线，solid表示实线
table{
width: 100%;
border: 1px;
border-style: solid;
}
table td{
border: 0.5px;
border-style: solid;
}
三、编写JavaScript脚本
1.首先在HTML中插入button，点击按钮时进行新增表格 新增2.接着，编写new()函数体 innerHTML是插入HTML元素，这里其实插入的是文本，也可以插入其余元素，例如document.innerHTML = “标题” function add(){ // 获取table标签元素 let table = document.getElementById("work_table"); // 创建新行 let newRow = table.insertRow(); // 创建三个新单元格 let cellName = newRow.insertCell(); let cellAge = newRow.insertCell(); let cellID = newRow.insertCell(); // 向表格中插入元素 cellName.innerHTML = "张三"; cellAge.innerHTML = "男"; cellID.innerHTML = "1"; }3.运行效果 上篇文章链接 link. 1.实现弹出窗口，这里和上篇一样，不详细说明 学生信息表 table{ width: 100%; border: 1px; border-style: solid; } table td{ border: 0.5px; border-style: solid; } body{ background-color: cyan; } #popDiv{ display: none; background-color: whitesmoke; z-index: 11; width: 600px; height: 600px; position:fixed; top:0; right:0; left:0; bottom:0; margin:auto; } /* 关闭按钮样式 */ #popDiv .close a { text-decoration: none; color: whitesmoke; } /* 弹出界面的关闭按钮 */ #popDiv .close{ text-align: right; margin-right: 5px; background-color:#2D2C3B; } #popDiv p{ text-align: center; font-size: 25px; font-weight: bold; } function popDiv(){ // 获取div元素 var popBox = document.getElementById("popDiv"); var popLayer = document.getElementById("popLayer"); // 控制两个div的显示与隐藏 popBox.style.display = "block"; popLayer.style.display = "block"; } function closePop(){ // 获取弹出窗口元素 let popDiv = document.getElementById("popDiv"); popDiv.style.display = "none"; } function add(){ // 获取table标签元素 let table = document.getElementById("work_table"); // 创建新行 let newRow = table.insertRow(); // 创建三个新单元格 let cellName = newRow.insertCell(); let cellAge = newRow.insertCell(); let cellID = newRow.insertCell(); // 向表格中插入元素 cellName.innerHTML = "张三"; cellAge.innerHTML = "男"; cellID.innerHTML = "1"; } 弹窗 姓名 年龄 学号 关闭 此处为弹出窗口2.给弹出窗口设置三个文本框用于输入 关闭 请输入 年龄(*);;;;;;; 工人性别(*)3.现在只需要修改add()函数就可以，也就是获取文本框的内容 这里相比于之前的add()函数只是新增了获取文本框的内容，获取文本框和获取table是一样的方法，通过id获取，也可以通过name和class获取可以通过console.log(typeof(name.value));获取变量的类型，在浏览器中查看，F12打开console控制台 function add(){ // 获取table标签元素 let table = document.getElementById("work_table"); // 创建新行 let newRow = table.insertRow(); // 创建三个新单元格 let cellName = newRow.insertCell(); let cellAge = newRow.insertCell(); let cellID = newRow.insertCell(); // 获取文本框内容 let name = document.getElementById("NAME"); let sex = document.getElementById("SEX"); let age = document.getElementById("AGE"); // 向表格中插入元素 cellName.innerHTML = name.value; cellAge.innerHTML = age.value; cellSex.innerHTML = sex.value; console.log(typeof(name.value)); closePop(); } 五、总代码 学生信息表 table{ width: 100%; border: 1px; border-style: solid; } table td{ border: 0.5px; border-style: solid; } body{ background-color: cyan; } #popDiv{ display: none; background-color: whitesmoke; z-index: 11; width: 600px; height: 600px; position:fixed; top:0; right:0; left:0; bottom:0; margin:auto; } /* 关闭按钮样式 */ #popDiv .close a { text-decoration: none; color: whitesmoke; } /* 弹出界面的关闭按钮 */ #popDiv .close{ text-align: right; margin-right: 5px; background-color:#2D2C3B; } #popDiv p{ text-align: center; font-size: 25px; font-weight: bold; } function popDiv(){ // 获取div元素 var popBox = document.getElementById("popDiv"); var popLayer = document.getElementById("popLayer"); // 控制两个div的显示与隐藏 popBox.style.display = "block"; popLayer.style.display = "block"; } function closePop(){ // 获取弹出窗口元素 let popDiv = document.getElementById("popDiv"); popDiv.style.display = "none"; } function add(){ // 获取table标签元素 let table = document.getElementById("work_table"); // 创建新行 let newRow = table.insertRow(); // 创建三个新单元格 let cellName = newRow.insertCell(); let cellAge = newRow.insertCell(); let cellID = newRow.insertCell(); // 获取文本框内容 let name = document.getElementById("NAME"); let sex = document.getElementById("SEX"); let ID = document.getElementById("AGE"); // 向表格中插入元素 cellName.innerHTML = name.value; cellAge.innerHTML = age.value; cellSex.innerHTML = sex.value; closePop(); } 弹窗 姓名 年龄 学号 关闭 请输入 年龄(*);;;;;;; 工人性别(*) √保存 |
【本文地址】