jquery拼接数据循环一个数据列表

简介: jquery拼接数据循环一个数据列表

但从后端请求过来json数据之后,需要把数据做成循环列表,那么,怎么jquery拼接数据循环一个数据列表?现在写一个简单的demo,效果如下所示:


参考代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>告警列表</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <style>
            .rightcont {
                height: 80px;
                margin-top: 12px;
                background: #f1f1f1;
                border-radius: 8px;
                padding-top: 15px;
            }           
            .iconalarm {
                float: left;
                width: 20%;
                text-align: center;
            }           
            .detailalarm {
                float: left;
                width: 65%;
            }           
            .namealarm {
                float: left;
                width: 15%;
            }
        </style>
    </head>
    <body>
        <div id="active">
            <ul class="rightalarm">
                <!--右侧报警监控 -->
                <div class="rightcont">
                    <div class="iconalarm">
                        <img src="images/fence/fence2.png" />
                        <p>sos</p>
                    </div>
                    <div class="detailalarm">
                        <p>2019-7-3 10:08</p>
                        <p>王大治发出SOS报警</p>
                    </div>
                    <div class="namealarm">
                        员工
                    </div>
                </div>
            </ul>
    </body>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var cont = [{
                    "image1": "images/fence/fence1.png",
                    "alarmtype": "sos",
                    "date": "2019-7-3 10:08",
                    "details": "李一男进入二道门危险区域",
                    "alarmname": "员工"
                },
                {
                    "image1": "images/fence/fence2.png",
                    "alarmtype": "危险",
                    "date": "2019-7-3 10:07",
                    "details": "孙二娘滞留生产车间8小时",
                    "alarmname": "访客"
                },
                {
                    "image1": "images/fence/fence3.png",
                    "alarmtype": "滞留",
                    "date": "2019-7-3 10:00",
                    "details": "马云脱岗窜岗报警",
                    "alarmname": "员工"
                },
                {
                    "image1": "images/fence/fence2.png",
                    "alarmtype": "脱岗",
                    "date": "2019-7-3 9:36",
                    "details": "王小婷走进办公室区域",
                    "alarmname": "访客"
                }
            ]
            var html = "";
            $.each(cont, function(k, v) { //这里的函数参数是键值对的形式,k代表键名,v代表值                
                html += '<div class="rightcont">';
                html += '<div  class="iconalarm">';
                html += '<img src=' + cont[k].image1 + ' />';
                html += '<p>' + cont[k].alarmtype + '</p> </div>';
                html += '<div  class="detailalarm">';
                html += ' <p>' + cont[k].date + '</p>';
                html += ' <p>' + cont[k].details + '</p></div>';
                html += ' <div  class="namealarm">' + cont[k].alarmname + ' </div></div>';
            });
            $(".rightalarm").append(html);
        })
    </script>
</html>
相关文章
|
1月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
11 0
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
36 0
|
1月前
|
JavaScript 前端开发
jquery怎么给循环出来的列表(类似于text框)取值和赋值
jquery怎么给循环出来的列表(类似于text框)取值和赋值
14 0
jquery怎么给循环出来的列表(类似于text框)取值和赋值
|
2月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
21 1
|
3月前
|
JSON JavaScript 数据格式
jQuery将json性别数据int类型进行格式化渲染
jQuery将json性别数据int类型进行格式化渲染
22 0
|
3月前
|
JavaScript
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
18 0
|
3月前
|
JSON 前端开发 JavaScript
ajax请求接口,jquery拼接数据循环
ajax请求接口,jquery拼接数据循环
35 0
|
4月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
32 0
|
5月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
26 0

相关产品

  • 云迁移中心
  • 相关课程

    更多