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

设置table中的tbody

news 2025/7/7 22:51:09

<!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程序找不到主类，找不到符号解决思路

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

设计模式和设计原则回顾

阿里云ACP云计算备考笔记 (5)——弹性伸缩

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

04-初识css

Ascend NPU上适配Step-Audio模型

CMake控制VS2022项目文件分组

算法：模拟

MySQL 部分重点知识篇