前端篇--html动态遍历后端list数据

最新推荐文章于 2024-02-02 13:52:28 发布

小明同学~~

最新推荐文章于 2024-02-02 13:52:28 发布

阅读量4.7w

点赞数 14

分类专栏：前端

本文链接：https://blog.csdn.net/smd2575624555/article/details/78959403

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Html跳转页面直接加载list数据

动态加载实现后端传的list数据

Html页面


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="jquery.min.js"></script>
</head>
        <table>
             <thead>
                <tr>
                    <th>月份</th>
                    <th>版本</th>
                    <th>业务</th>
                    <th>业务范围</th>
                    <th>数量</th>
                 </tr>
              </thead>

              <tbody class="table_node">
                    <!--动态载入数据-->
                    <!-- more data -->
              </tbody>
         /table>
    <script src="load_data.js"></script> <!--引入动态加载文件-->
</body>
</html>

Js文件load_data.js

/**

 * 自动加载规则流水信息

 */

window.onload = function () {

    $.ajax({

        type: 'GET',
        url: "http:localhost:8080/api/select_latest",
        contentType: "application/json;cherset=utf-8",
        dataType: "json",
        success: function (data)
                $('.table_node').empty()
                //取出后端传过来的list值
                var chargeRuleLogs = data.data
                //对list值进行便利
    $.each(chargeRuleLogs, function (index, n) {

               var child = "<tr>"+"<td>" + chargeRuleLogs[index].month +  "</td>"
               + "<td>" + chargeRuleLogs[index].ver + "</td>"
               + "<td>" + chargeRuleLogs[index].bizPretty + "</td>"
               + "<td>"+chargeRuleLogs[index].bizRangePretty + "</td>"
               + "<td>" + chargeRuleLogs[index].count + "</td>"+"</tr>"

                //将信息追加
                $(".table_node").append(child)
                    });
              }        
    });
}

注意：

一定要引入js文件

小明同学~~

关注

14
点赞
踩
57

收藏

觉得还不错? 一键收藏
12
评论
前端篇--html动态遍历后端list数据

Html跳转页面直接加载list数据动态加载实现后端传的list数据Html页面&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta http-equiv="X-UA-Compatible" content=
复制链接

扫一扫