JavaScript网页——动态生成表格

 

1.创建学生数据

分析:因为里面的学生数据都是动态的,我们需要js动态生成。这里我们模拟数据,自己定义好数据。数据我们采取对象形式存储。 

var students = [{
            name:'吕小布',
            subject:'JavaScript',
            score:'100',
        },{
            name:'张益达',
            subject:'JavaScript',
            score:'98',
        },{
            name:'关古神秘',
            subject:'JavaScript',
            score:'96',
        },{
            name:'张大炮',
            subject:'JavaScript',
            score:'97',
        },
    ]

2.创建行

所有的数据都是放到tbody里面的行里面。 所有的数据都是放到tbody里面的行里面.

//2.往tbody里面创建行:有儿个人(通过数组的长度)我们就创建几行
        var tbody = document.quer
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第1章 JavaScript简介 1 1.1 JavaScript是什么 1 1.2 JavaScript不是什么 2 1.3 JavaScript的用处 3 1.4 JavaScript及其在Web页面中的位置 3 1.5 Ajax是什么 5 1.6 JavaScript是什么样子的 6 1.7 JavaScript及其在Web开发中承担的角色 7 1.8 JavaScript和事件 9 1.9 标准化JavaScript和W3C 11 1.9.1 JavaScript对象 12 1.9.2 文档对象模型 12 1.10 关于浏览器 13 1.10.1 JavaScript的版本 14 1.10.2 你的浏览器遵循标准吗 16 1.10.3 浏览器是否已启用JavaScript 16 1.11 JavaScript代码放在哪儿 17 1.12 验证标签 20 1.12.1 W3C验证工具 21 1.12.2 Validome验证工具 21 1.13 应知应会 22 练习 23 第2章 脚本的安装 24 2.1 HTML文档与JavaScript 24 2.2 语法细节 27 2.2.1 区分大小写问题 27 2.2.2 自由形式及保留字 27 2.2.3 语句及分号 28 2.2.4 注释 28 ... 2.2.5 〈script〉标签    2.3 生成HTML 并输出显示    2.3.1 字符串及字符串串联    2.3.2 write()及writeln()方法    2.4 关于调试    2.5 调试工具    2.5.1 Firefox    2.5.2 在Internet Explorer 8中调试    2.5.3 [removed]URL 协议    2.6 JavaScript与旧浏览器或受限的浏览器    2.7 应知应会    练习    第3章 数据类型、字面量和变量    3.1 数据类型    3.1.1 基本数据类型    3.1.2 复合数据类型    3.2 变量    3.2.1 有效变量名    3.2.2 声明和初始化变量    3.2.3 动态或宽松类型语言    3.2.4 变量作用域    3.2.5 变量的拼接    3.3 常量    3.4 要注意的bug    3.5 应知应会    练习    第4章 对话框    4.1 与用户交互    4.1.1 alert()方法    4.1.2 prompt()方法    4.1.3 confirm()方法    4.2 应知应会    练习    第5章 运算符    5.1 JavaScript运算符和表达式    5.1.1 赋值运算符    5.1.2 优先级和结合性    5.2 运算符类型    5.2.1 算术运算符    5.2.2 快捷赋值运算符    5.2.3 递增运算符和递减运算符    5.2.4 拼接运算符    5.2.5 比较运算符    5.2.6 逻辑运算符    5.2.7 条件运算符    5.2.8 位运算符    5.3 数字、字符串还是布尔值?数据类型转换    5.3.1 parseInt()函数    5.3.2 parseFloat()函数    5.3.3 eval()函数    5.4 特殊运算符    5.5 应知应会    练习    第6章 条件选择    6.1 控制结构、块及复合语句    6.2 条件    6.2.1 if/else    6.2.2 if/else if    6.2.3 switch    6.3 循环    6.3.1 while循环    6.3.2 do/while循环    6.3.3 for循环    6.3.4 for/in循环    6.3.5 使用break和continue控制循环    6.3.6 嵌套循环及标签    6.4 应知应会    练习    第7章 函数    7.1 什么是函数    7.1.1 函数声明和调用    7.1.2 返回值    7.1.3 匿名函数变量    7.1.4 闭包    7.1.5 递归    7.1.6 函数是对象    7.2 调试技巧    7.2.1 函数语法    7.2.2 使用try/catch和throw捕捉异常    7.3 应知应会    练习    第8章 对象    8.1 什么是对象    8.1.1 对象及点语法    8.1.2 使用构造函数创建对象    8.1.3 对象的属性    8.1.4 对象的方法    8.2 类和用户自定义函数    8.2.1 什么是类    8.2.2 什么是this   
好的,下面是一个实现上述要求的示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态生成表格</title> <style> table { border-collapse: collapse; margin: 20px 0; } th, td { padding: 10px; border: 1px solid #ddd; text-align: center; } .delete-link { color: #f00; text-decoration: none; } </style> </head> <body> <button id="addRow">添加行</button> <table id="myTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <!-- 初始行为空 --> </tbody> </table> <script> const data = [ { name: 'Tom', age: 23 }, { name: 'Jerry', age: 25 }, { name: 'Bob', age: 21 } ]; const table = document.getElementById('myTable'); const tbody = table.querySelector('tbody'); // 初始化表格 data.forEach(item => { const tr = document.createElement('tr'); const td1 = document.createElement('td'); td1.textContent = item.name; const td2 = document.createElement('td'); td2.textContent = item.age; const td3 = document.createElement('td'); const deleteLink = document.createElement('a'); deleteLink.href = 'javascript:void(0)'; deleteLink.className = 'delete-link'; deleteLink.textContent = '删除'; deleteLink.addEventListener('click', () => { tr.remove(); }); td3.appendChild(deleteLink); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tbody.appendChild(tr); }); // 添加行的按钮点击事件 const addRowBtn = document.getElementById('addRow'); addRowBtn.addEventListener('click', () => { const tr = document.createElement('tr'); const td1 = document.createElement('td'); const input1 = document.createElement('input'); input1.type = 'text'; td1.appendChild(input1); const td2 = document.createElement('td'); const input2 = document.createElement('input'); input2.type = 'number'; td2.appendChild(input2); const td3 = document.createElement('td'); const deleteLink = document.createElement('a'); deleteLink.href = 'javascript:void(0)'; deleteLink.className = 'delete-link'; deleteLink.textContent = '删除'; deleteLink.addEventListener('click', () => { tr.remove(); }); td3.appendChild(deleteLink); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tbody.appendChild(tr); }); </script> </body> </html> ``` 以上代码中,首先定义了一个数组 `data`,用于模拟表格中的数据。然后在 JavaScript 中使用 `forEach` 方法,遍历数组中的每一个元素,动态创建表格的行和单元格,并将数据填充到单元格中。注意每一行的“删除”链接都添加了事件监听器,点击链接后可以删除对应的行。 此外,还添加了一个“添加行”的按钮,点击按钮后可以动态添加一行到表格中。新添加的行中包含两个输入框和一个“删除”链接,同样可以删除当前行。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值