当前位置：首页 > news >正文

设置table中的tbody

news 2026/3/26 18:41:40

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>设置table中的tbody</title>
   </head>
   <body>
       <script>
           // 这里有json数据，是java响应给浏览器的，浏览器通过eval函数转换成的数据
           var data = {
               "total" : 3,
               "emps" : [
                   {"empno" : 7369,"ename" : "SMITH","sal" : 800.0},
                   {"empno" : 7368,"ename" : "JACK","sal" : 1800.0},
                   {"empno" : 7367,"ename" : "TOOM","sal" : 2800.0},
               ]
           };
           // 现在希望把这些数据展示到table当中
           window.onload = function(){
               // 获取button对象
               var displayBtnElt = document.getElementById("displayBtn");
               // 对button对象绑定鼠标单击事件
               displayBtnElt.onclick = function(){
                   // 准备一个空字符串
                   var html = "";
                   // 获取data数据中emps属性值
                   var emps = data.emps;
                   // 遍历获取的emps
                   for(var i = 0; i < emps.length; i++){
                       // 每次循环获取一个员工信息
                       var emp = emps[i];
                       // 读取每个员工的各个属性并拼串
                       html += "<tr align='center'>";
                       html += "<td>" + emp.empno + "</td>";
                       html += "<td>" + emp.ename + "</td>";
                       html += "<td>" + emp.sal + "</td>";
                       html += "</tr>";
                   }
                   // 将拼接好的字符串放到tbody中
                   document.getElementById("tbody").innerHTML = html;
                   // 将获取到的信息条数（data.total）放到记录条数消息框中显示
                   document.getElementById("count").innerHTML = data.total;
               }
           }
       </script>
       <center>
           <input type="button" value="显示员工信息" id="displayBtn" />

           
           <h2>员工信息列表</h2>
           <hr />
           <table border="2px" width="50%">
               <thead>
                   <tr>
                       <th>员工编号</th>
                       <th>员工姓名</th>
                       <th>员工薪资</th>
                   </tr>
               </thead>
               <tbody id="tbody">
</tbody>
           </table>
           共计<span id="count" >0</span>条记录
       </center>
   </body>

</html>

设置table中的tbody

相关文章：

设置table中的tbody

2023美赛A题完整数据！思路代码数据数学建模

Node.js安装与配置

k8s（存储）数据卷与数据持久卷

php5.6.9安装sqlsrv扩展（windows）

URL黑名单扫描工具ua特征 GET(args)参数检查 cookie黑名单 POST参数检查参考代码

【软考系统架构设计师】2022下论文写作历年真题

推荐3个好用的scrum敏捷项目管理工具

每日学术速递2.17

ElementUI`resetFields()`方法避坑

如何保证数据库和缓存双写一致性？

Hinge Loss 和 Zero-One Loss

Linux下zabbix_proxy实施部署

Rust之错误处理(二)：带结果信息的可恢复错误

[ vulhub漏洞复现篇 ] Drupal Core 8 PECL YAML 反序列化任意代码执行漏洞(CVE-2017-6920)

如何将数据库结构导入到word

FreeRTOS内存管理 | FreeRTOS十五

【数字电路】数字电路的学习核心

day45【代码随想录】动态规划之完全平方数、单词拆分、打家劫舍、打家劫舍 II

java程序，springboot程序找不到主类，找不到符号解决思路

Linux内核观测与跟踪的利器BPF环境测试

告别Joplin！用MarkDownload+Obsidian打造你的网页剪藏工作流（附完整配置JSON）

STM32F1XX 的 CAN 的波特率配置

Windows文件完整性验证神器：HashCheck Shell扩展完全指南

除了Cesium和Mapbox，用three-tile+Three.js打造轻量级WebGIS的完整实践

大厂裁员潮下，软件人的“抗风险”能力清单

用2万小时人类视频预训练机器人，一场豪赌还是必经之路？

告别振动噪音：用DRV8825模块的细分功能，让你的3D打印机或CNC雕刻机运行更安静平稳

3个实战场景：League-Toolkit如何帮你提升英雄联盟游戏体验

2026年，如何甄选一家真正靠谱的圆盘刀片工厂？