JS 动态创建表格

简介: JS 动态创建表格

利用节点操作也可以完成动态地创建表格,我们将数据放进对象中,再将对象放入数组,每步的操作为创建行,创建单元格,再创建删除格,单元格和删除格之所以没有一起创建是因为单元格的个数等于对象内属性的个数,可以直接遍历创建,而删除是单独的功能,用到的方法就是学习过的各种节点操作,内容可以直接添加在数组中即可完成创建(开发时数据在数据库中连接

JS 部分代码:

vartbody=document.querySelector('tbody');
for(vari=0;i<dates.length;i++){   //创建行vartrs=document.createElement('tr');
tbody.appendChild(trs);
for(varkindates[i]){   //创建单元格vartds=document.createElement('td');
tds.innerHTML=dates[i][k];
trs.appendChild(tds);
        }
vardel=document.createElement('td');  //设置删除操作del.innerHTML="<button class='delbtn'>删 除</button>"trs.appendChild(del);
varbtn=document.querySelectorAll('.delbtn');
for(varj=0;j<btn.length;j++){
btn[j].onclick=function(){
tbody.removeChild(this.parentNode.parentNode);
            }
          }
       }


完整代码:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{
width: 700px;
margin: 100pxauto;
border: 2pxsolid;
        }
thead{
height: 60px;
font-size: 25px;
font-weight: bold;
background-color: rgb(124, 170, 255);
        }
theadtd:last-child{
background-color: rgb(255, 114, 114);
        }
td{
border: 2pxsolid;
text-align: center;
        }
tbody{
font-size: 20px;
font-weight: bold;
background-color: rgb(234, 255, 139);
        }
        .delbtn{
width: 50px;
height: 30px;
background-color: rgb(255, 247, 247);
-webkit-border-radius:30px;
-moz-border-radius:30px;
color: rgb(0, 0, 0);
font-weight: bold;
        }
        .delbtn:hover{
background-color: rgb(131, 131, 131);
color: rgb(255, 255, 255);
        }
</style></head><body><tablecellspacing="0"><thead><tr><td>姓名</td><td>科目</td><td>成绩</td><td>删除</td></tr></thead><tbody></tbody></table><script>vardates=[
           {
name:'小明',
sub:'JS',
grade:'99'           },
           {
name:'小红',
sub:'JS',
grade:'56'           },
           {
name:'小张',
sub:'JS',
grade:'95'           },
           {
name:'小朱',
sub:'JS',
grade:'65'           },
           {
name:'张三',
sub:'JS',
grade:77,
           }
       ];
vartbody=document.querySelector('tbody');
for(vari=0;i<dates.length;i++){   //创建行vartrs=document.createElement('tr');
tbody.appendChild(trs);
for(varkindates[i]){   //创建单元格vartds=document.createElement('td');
tds.innerHTML=dates[i][k];
trs.appendChild(tds);
        }
vardel=document.createElement('td');  //设置删除操作del.innerHTML="<button class='delbtn'>删 除</button>"trs.appendChild(del);
varbtn=document.querySelectorAll('.delbtn');
for(varj=0;j<btn.length;j++){
btn[j].onclick=function(){
tbody.removeChild(this.parentNode.parentNode);
            }
          }
       }
</script></body></html>
相关文章
|
6月前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
50 2
|
7月前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
41 0
|
7月前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
58 1
|
7月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
120 1
|
8月前
|
前端开发 JavaScript
使用JavaScript动态更改元素的CSS属性
【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
119 3
|
9月前
|
数据采集 JavaScript 前端开发
使用Go和JavaScript爬取股吧动态信息的完整指南
本文介绍了如何使用Go和JavaScript构建网络爬虫,从股吧网站抓取实时股市信息。通过设置代理服务器以应对反爬策略,利用`got`库执行JavaScript提取动态数据,如用户讨论和市场分析。示例代码展示了爬虫的实现过程,包括浏览器实例创建、代理配置、JavaScript执行及数据打印。此方法有助于投资者及时获取市场资讯,为决策提供支持。
151 4
使用Go和JavaScript爬取股吧动态信息的完整指南
|
8月前
|
JavaScript
JS实现表格跨行变色
JS实现表格跨行变色
|
8月前
|
JavaScript
Vue.js中使用作用域插槽实现自定义表格组件
Vue.js中使用作用域插槽实现自定义表格组件
112 1
|
9月前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
7月前
|
JavaScript 前端开发
前端 JS 经典:动态执行 JS
前端 JS 经典:动态执行 JS
78 0

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62