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

设置table中的tbody

news 2026/2/9 12:12:21

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

Docker 离线安装指南

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

三体问题详解

前端开发面试题总结-JavaScript篇(一)

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

USB Over IP专用硬件的5个特点

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

招商蛇口 | 执笔CID，启幕低密生活新境

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化