js 循环遍历div层

古城微笑少年丶 2021-10-08 05:40 444阅读 0赞

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
            <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
                <%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
                    <!DOCTYPE html>
                    <html lang="en">
                        
                        <head>
                            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                            
                            <meta charset="utf-8">
                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                            <meta name="viewport" content="width=device-width, initial-scale=1">
                            <title>
                                机器看板
                            </title>
                            
                            <link href="../../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
                            
                            <link href="../../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
                            
                            <link href="../../vendors/nprogress/nprogress.css" rel="stylesheet">
                            
                            <link href="../build/css/custom.min.css" rel="stylesheet">
                            <script src="../../vendors/jquery/dist/jquery.min.js">
                            </script>
                        </head>
                        <style>
                            .nomorlcolor {color:green;} /** 正常**/ .waitcolor {color:red;} /** 待机 **/
                            .unlinkcolor {color:gray;} /** 断开 **/ .tiaojicolor {color:blue;} /** 调机
                            **/ .othercolor{color:orange;font-size:26px;white-space: nowrap;}/** 其他
                            **/
                        </style>
                        
                        <body>
                            <div class="row top_tiles" id="kanbanID">
                            </div>

<script type="text/javascript">
        var list;
        $(document).ready(function() {
            var data = [{
                "machCode": "1#",
                "machStatus": "正常",
                "mouldCode": "null",
                "productUnits": "0",
                "scheduledProductUnits": "0",
                "scheduledEndTime": "null",
                "goodUnits": "null"
            },
            {
                "machCode": "2#",
                "machStatus": "调机",
                "mouldCode": "null",
                "productUnits": "0",
                "scheduledProductUnits": "0",
                "scheduledEndTime": "null",
                "goodUnits": "null"
            },
            {
                "machCode": "3#",
                "machStatus": "关机",
                "mouldCode": "null",
                "productUnits": "0",
                "scheduledProductUnits": "0",
                "scheduledEndTime": "null",
                "goodUnits": "null"
            },
            {
                "machCode": "4#",
                "machStatus": "待机",
                "mouldCode": "null",
                "productUnits": "0",
                "scheduledProductUnits": "0",
                "scheduledEndTime": "null",
                "goodUnits": "null"
            },
            {
                "machCode": "5#",
                "machStatus": "修模",
                "mouldCode": "null",
                "productUnits": "0",
                "scheduledProductUnits": "0",
                "scheduledEndTime": "null",
                "goodUnits": "null"
            },
            {
                "machCode": "6#",
                "machStatus": "首件",
                "mouldCode": "null",
                "productUnits": "0",
                "scheduledProductUnits": "0",
                "scheduledEndTime": "null",
                "goodUnits": "null"
            },
            {
                "machCode": "7#",
                "machStatus": "正常",
                "mouldCode": "null",
                "productUnits": "0",
                "scheduledProductUnits": "0",
                "scheduledEndTime": "null",
                "goodUnits": "null"
            },
            {
                "machCode": "8#",
                "machStatus": "待机",
                "mouldCode": null,
                "productUnits": "0",
                "scheduledProductUnits": "1",
                "scheduledEndTime": null,
                "goodUnits": "0"
            },
            {
                "machCode": "9#",
                "machStatus": "调机",
                "mouldCode": null,
                "productUnits": "0",
                "scheduledProductUnits": "1",
                "scheduledEndTime": null,
                "goodUnits": "0"
            }];
            for (var i in data) {
                list = data[i];
                if (list.machStatus == "正常") {
                    $('#kanbanID').append('<div class="animated flipInY col-lg-2 col-md-3 col-sm-6 col-xs-12">' + ' <div class="tile-stats">' + '<div class="icon">' + '<i class="fa fa-refresh fa-spin fa-3x fa-fw nomorlcolor">' + '</i>' + '</div>' + '<div class="count nomorlcolor">' + list.machCode + '</div>' + '<h3>' + list.mouldCode + '</h3>' + '<p>' + list.productUnits + '</p>' + '<p>' + list.scheduledProductUnits + '</p>' + '<p>' + list.scheduledEndTime + '</p>' + '</div>' + '</div>');
                } else if (list.machStatus == "调机") {
                    $('#kanbanID').append('<div class="animated flipInY col-lg-2 col-md-3 col-sm-6 col-xs-12">' + ' <div class="tile-stats">' + '<div class="icon">' + '<i class="fa fa fa-hand-pointer-o tiaojicolor">' + '</i>' + '</div>' + '<div class="count tiaojicolor">' + list.machCode + '</div>' + '<h3>' + list.mouldCode + '</h3>' + '<p>' + list.productUnits + '</p>' + '<p>' + list.scheduledProductUnits + '</p>' + '<p>' + list.scheduledEndTime + '</p>' + '</div>' + '</div>');
                } else if (list.machStatus == "待机") {
                    $('#kanbanID').append('<div class="animated flipInY col-lg-2 col-md-3 col-sm-6 col-xs-12">' + ' <div class="tile-stats">' + '<div class="icon">' + '<i class="fa fa fa-clock-o waitcolor">' + '</i>' + '</div>' + '<div class="count waitcolor">' + list.machCode + '</div>' + '<h3>' + list.mouldCode + '</h3>' + '<p>' + list.productUnits + '</p>' + '<p>' + list.scheduledProductUnits + '</p>' + '<p>' + list.scheduledEndTime + '</p>' + '</div>' + '</div>');
                } else if (list.machStatus == "断开") {
                    $('#kanbanID').append('<div class="animated flipInY col-lg-2 col-md-3 col-sm-6 col-xs-12">' + ' <div class="tile-stats">' + '<div class="icon">' + '<i class="fa fa fa-unlink unlinkcolor">' + '</i>' + '</div>' + '<div class="count unlinkcolor">' + list.machCode + '</div>' + '<h3>' + list.mouldCode + '</h3>' + '<p>' + list.productUnits + '</p>' + '<p>' + list.scheduledProductUnits + '</p>' + '<p>' + list.scheduledEndTime + '</p>' + '</div>' + '</div>');
                } else {
                    $('#kanbanID').append('<div class="animated flipInY col-lg-2 col-md-3 col-sm-6 col-xs-12">' + ' <div class="tile-stats">' + '<div class="icon">' + '<h2 class="fa fa fa  othercolor">' + list.machStatus + '</h2>' + '</div>' + '<div class="count othercolor">' + list.machCode + '</div>' + '<h3>' + list.mouldCode + '</h3>' + '<p>' + list.productUnits + '</p>' + '<p>' + list.scheduledProductUnits + '</p>' + '<p>' + list.scheduledEndTime + '</p>' + '</div>' + '</div>');
                }
    
    
                document.getElementById("kanbanID").innerHTML;
            }
        });
    </script>

</body>  
</html> ![Center][]

[Center]: /images/20211008/3484b36a8bb9461cae5e6dc7f51d552e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，444人围观）

还没有评论，来说两句吧...

相关阅读

相关文件遍历——指定遍历的层数

本例演示了“文件遍历时，指定遍历的层数”的实现方式。 1. 例子代码： package com.myjava.test; import java.io.Fi

我不是女神ヾ/ 2023年10月16日 20:22/ 0 赞/ 59 阅读

相关 JavaScript循环遍历

JavaScript循环遍历 for() 遍历数组元素 forEach() 遍历数组元素 map() 遍历数组元素 for…in 可循环对象和数组

比眉伴天荒/ 2023年10月06日 19:34/ 0 赞/ 63 阅读

相关 JS常用的循环遍历

数组遍历 for、forEach、for …of const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];

港控/mmm°/ 2022年10月16日 14:22/ 0 赞/ 207 阅读

相关 js的循环语句(遍历对象)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

「爱情、让人受尽委屈。」/ 2022年09月09日 12:44/ 0 赞/ 228 阅读

相关前端循环遍历

遍历数组 for let arr = ['小林', '小赵', '小王'] for(var i=0;arr.length;i++){

野性酷女/ 2022年09月03日 14:28/ 0 赞/ 222 阅读

相关 js循环遍历

方式一 var arr = [1,2,3,4,5]; for(let i = 0;i<arr.length;i++){

小灰灰/ 2022年05月28日 10:23/ 0 赞/ 283 阅读

相关 Freemarker循环遍历

循环格式 <list 要循环的数据 as 循环后的数据> </list> 循环的下标通过，item\_index获取比如 <list

痛定思痛。/ 2022年05月16日 08:29/ 0 赞/ 443 阅读

相关 Thymeleaf循环遍历

循环遍历 Iteration，查阅文档 ![这里写图片描述][70] th:each 每次遍历都会生成，当前这个标签三个h4标签一个h4，带着三个s

快来打我*/ 2022年05月14日 23:49/ 0 赞/ 726 阅读

相关 JS 循环遍历JSON数据

JSON数据如：\{"options":"\[\{/"text/":/"王家湾/",/"value/":/"9/"\},\{/"text/":/"李家湾/",/"valu

朱雀/ 2022年04月24日 04:14/ 0 赞/ 400 阅读

相关 js 循环遍历div层

<%@ page language="java" import="java.util." contentType="text/html; charset=UTF-8"

古城微笑少年丶/ 2021年10月08日 05:40/ 0 赞/ 445 阅读