js 大佬求救

最新推荐文章于 2024-04-27 11:43:57 发布

一只阳ovo

最新推荐文章于 2024-04-27 11:43:57 发布

阅读量184

点赞数

文章标签： javascript servlet java

本文链接：https://blog.csdn.net/qq_49408450/article/details/126046149

版权

这篇博客展示了如何在HTML页面中通过JavaScript处理JSON数据并将其动态填充到表格中。当点击“显示员工信息列表”按钮时，JavaScript函数会读取JSON对象中的员工信息，并将这些信息显示在表格的tbody部分，同时更新总条数显示。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>设置table的tbody</title>
   </head>
   <body>

   <script type="text/javascript">
       //有这些json数据
       var data = {
           "total":4,
           "emps":[
               {"empno":7369,"ename":"SMITH":"sal":800.0},
               {"empno":7361,"ename":"SMITH2":"sal":1800.0},
               {"empno":7362,"ename":"SMIT3":"sal":2800.0},
               {"empno":7363,"ename":"SMITH4":"sal":3800.0}

           ]
       };

       //希望把数据展示到table栏
       window.onload = function(){
           var dispalyBtnElt = document.getElementById("displayBtn");
           dispalyBtnElt.onclick = function(){
               var emps = data.emps;
               var html = "";
               for(var i=0;i<emps.length;i++){
                   var emp = emps[i];
                   html+="<tr>";
                   html+="<td>"+emp.empno+"</td>";
                   html+="<td>"+emp.ename+"</td>";
                   html+="<td>"+emp.sal+"</td>";
                   html+="</tr> ";
               }
               document.getElementById("emptbody").innerHTML= html;
               document.getElementById("count").innerHTML = data.total;
           }
       }


   </script>
   <input type="button" value="显示员工信息列表" id="displayBtn" />
   <h2 align="center">员工信息列表</h2>
   <hr>
       <table border="1px" width="50%" align="center">
           <tr>
               <th>员工编号</th>
               <th>员工名字</th>
               <th>员工薪资</th>
           </tr>
           <tbody id="emptbody">
           
           </tbody>
       </table>
       总共<span id="count">0</span>条数

   </body>
</html>