设置table中的tbody

最新推荐文章于 2024-01-02 15:36:23 发布

heliuerya

最新推荐文章于 2024-01-02 15:36:23 发布

阅读量793

点赞数

分类专栏：学习笔记 JavaScript 文章标签： javascript html5

本文链接：https://blog.csdn.net/heliuerya/article/details/129092231

版权

学习笔记同时被 2 个专栏收录

277 篇文章 5 订阅

订阅专栏

JavaScript

39 篇文章 0 订阅

订阅专栏

<!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>