動態構建HTML

時間 2019-12-12
標籤動態構建 html 欄目 HTML 简体版
原文原文鏈接
解析json數據動態構建表格javascript
代碼實例css
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<style>
    .backdrop{
        height: 40px;
        background: url(images/head_reight.png) no-repeat 0 0;
        background-size: 108% 100%;
        text-align: center;
    }
    .span_font{
        font-weight: bolder;
        font-size: 20px;
    }
    .col-sm-1{
        height: 110px;
        border: 1px solid;
    }
    .col-sm-11{
        border: 1px solid;
    }
</style>
<body>
<div>
    <div id="content"></div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    var data =  "{"pump":[{"id":"1","type":"pump","state":"1","data":"電流1.2A溫度20℃流量3T/h","description":"水泵1"}," +
        "{"id":"2","type":"pump","state":"0","data":"電流1.2A溫度20℃流量3T/h","description":"水泵2"}," +
        "{"id":"10","type":"pump","state":"0","data":"電流1.2A溫度20℃流量3T/h","description":"水泵10"}]," +
        ""broadcast":[{"id":"1","type":"broadcast","state":"1","data":"電流1.2A溫度20℃流量3T/h","description":"廣播1"}," +
        "{"id":"2","type":"broadcast","state":"0","data":"電流1.2A溫度20℃流量3T/h","description":"廣播2"}," +
        "{"id":"5","type":"video","state":"0","data":"電流1.2A溫度20℃流量3T/h","description":"視頻5"}]," +
        ""compressedAir":[{"id":"1","type":"compressedAir","state":"1","data":"電流1.2A溫度20℃流量3T/h","description":"壓風1"}," +
        "{"id":"2","type":"compressedAir","state":"0","data":"電流1.2A溫度20℃流量3T/h","description":"壓風2"}," +
        "{"id":"5","type":"compressedAir","state":"0","data":"電流1.2A溫度20℃流量3T/h","description":"壓風5"}]," +
        ""transport":[{"id":"1","type":"transport","state":"1","data":"電流1.2A溫度20℃流量3T/h","description":"運輸1"}," +
        "{"id":"2","type":"transport","state":"0","data":"電流1.2A溫度20℃流量3T/h","description":"運輸2"}," +
        "{"id":"5","type":"transport","state":"0","data":"電流1.2A溫度20℃流量3T/h","description":"運輸5"}]," +
        ""ventilate":[{"id":"1","type":"ventilate","state":"1","data":"電流1.2A溫度20℃流量3T/h","description":"通風1"}," +
        "{"id":"2","type":"ventilate","state":"0","data":"電流1.2A溫度20℃流量3T/h","description":"通風2"}," +
        "{"id":"5","type":"ventilate","state":"0","data":"電流1.2A溫度20℃流量3T/h","description":"通風5"}]}";
    init();
    jf_setHeight();
    function init() {
        var html = '<div class="row col-sm-12" style="height: 70px">' +
            '<div class="col-sm-1 backdrop"></br><img src="images/loadLogo.jpg" width="120px"></div>' +
            '<div class="col-sm-11 backdrop" style="height: 110px;"><span  class="span_font">' +
            '</br>井下人員跟蹤定位安全系統</span></div>' +
            '</div>'+
            '<div class="row col-sm-12" style="height: 100px">' +
            '<div class="col-sm-1 backdrop" ='jf_navigation("person_location")'><span class="span_font"></br>人員定位</span></div>' +
            '<div class="col-sm-11 backdrop" style="height: 100px;">' +
            '<marquee><span style="font-weight: bolder;font-size: 60px;color: white;">'+
            '井下人員跟蹤定位安全系統</span>' +
            '</marquee>'+
            '</div>' +
            '</div>'+
            '<div class="row col-sm-12" style="height: 100px">' +
            '<div class="col-sm-1 backdrop" ='jf_navigation("monitor")'><span class="span_font"></br>檢測監控</span></div>' +
            '<div class="col-sm-11">' +
            '<span>本公司是由大連理工大學、大連民勇集團股份有限公司等單位的科技人員組成， 共有員工100餘人，從事高端技術的創新研發。' +
            '成功研製了人工智能機器人、kj323型礦井人員跟蹤定位管理系統、多媒體語言教室系統、gps綜合視頻成像及診斷系統等，' +
            '屢次榮獲國際、國家級獎勵。解決國內外礦井生產管理系統，知足企業迫切需求， 公司成功研製了kj323型礦井人員跟蹤定位管理系統。 ' +
            '該系統採用了國際上最早井的zigbee無線傳感器網絡技術和2.4g射頻識別技術， 具有信號覆蓋廣、數據實時更新、精確度高等特色，' +
            '真正意義上實現了井下人員的跟蹤定位。 應用該系統能夠極大的提升礦井生產企業的安全管理水平，安全監管力度， 爲應急援救提供最及時、' +
            '準確、可靠的信息。</span>'+
            '</div>' +
            '</div>';
        var obj = JSON.parse(data);
        if("pump" in obj) {
            var pump = obj.pump;
            var contentHtml = '';
            contentHtml += '<div class="row col-sm-12 pump_content">';
            for (var i = 0; i < pump.length; i++) {
                pump_id = pump[i].id;
                pump_state = pump[i].state;
                pump_data = pump[i].data;
                pump_description = pump[i].description;
                contentHtml += '<div class="row" style="width: 420px">';
                if(pump_state==0) {
                    contentHtml += '<div class="col-sm-3"><img src="images/pump.png" height="80px" width="80px"/>' +
                        '<input value="'+pump_description+'" style='width:100px;border:none;' readonly/></div>';
                }else {
                    contentHtml += '<div class="col-sm-3"><img src="images/pump.gif" height="80px" width="80px"/>' +
                        '<input value="'+pump_description+'" style='width:100px;border:none;' readonly/></div>';
                }
                contentHtml += '<div class="col-sm-2"></br><img src="images/map.png" height="30px" width="30px" ' +
                    '='jf_map("pump"+'+pump_id+')'/></div>'+
                    '<div class="col-sm-7"></br><input value="'+pump_data+'" style="border:none;" readonly/></div>';
                contentHtml += '</div>';
            }
            contentHtml += '</div>';
            html += '<div class="row col-sm-12">'+
                '<div class="col-sm-1 backdrop pump_div" ='jf_navigation("pump")'>' +
                '<span class="span_font"></br>排水系統</span>' +
                '</div>' +
                '<div class="col-sm-11">' +
                contentHtml+
                '</div>'+
                '</div>';
        }

        if("ventilate" in obj) {
            var ventilate = obj.ventilate;
            var contentHtml = '';
            contentHtml += '<div class="row col-sm-12 ventilate_content">';
            for (var i = 0; i < ventilate.length; i++) {
                ventilate_id = ventilate[i].id;
                ventilate_state = ventilate[i].state;
                ventilate_data = ventilate[i].data;
                ventilate_description = ventilate[i].description;
                contentHtml += '<div class="row" style="width: 420px">';
                if(ventilate_state==0) {
                    contentHtml += '<div class="col-sm-3"><img src="images/ventilate.png" height="80px" width="80px"/>' +
                        '<input value="'+ventilate_description+'" style='width:100px;border:none;' readonly/></div>';
                }else {
                    contentHtml += '<div class="col-sm-3"><img src="images/ventilate.gif" height="80px" width="80px"/>' +
                        '<input value="'+ventilate_description+'" style='width:100px;border:none;' readonly/></div>';
                }
                contentHtml += '<div class="col-sm-2"></br><img src="images/map.png" height="30px" width="30px" ' +
                    '='jf_map("ventilate"+'+ventilate_id+')'/></div>'+
                    '<div class="col-sm-7"></br><input value="'+ventilate_data+'" style="border:none;" readonly/></div>';
                contentHtml += '</div>';
            }
            contentHtml += '</div>';
            html += '<div class="row col-sm-12">'+
                '<div class="col-sm-1 backdrop ventilate_div" ='jf_navigation("ventilate")'>' +
                '<span class="span_font"></br>通風系統</span></div>' +
                '<div class="col-sm-11">' +
                contentHtml+
                '</div>'+
                '</div>';
        }

        if("compressedAir" in obj) {
            var compressedAir = obj.compressedAir;
            var contentHtml = '';
            contentHtml += '<div class="row col-sm-12 compressedAir_content">';
            for (var i = 0; i < compressedAir.length; i++) {
                compressedAir_id = compressedAir[i].id;
                compressedAir_state = compressedAir[i].state;
                compressedAir_data = compressedAir[i].data;
                compressedAir_description = compressedAir[i].description;
                contentHtml += '<div class="row" style="width: 420px">';
                if(compressedAir_state==0) {
                    contentHtml += '<div class="col-sm-3"><img src="images/ventilate.png" height="80px" width="80px"/>' +
                        '<input value="'+compressedAir_description+'" style='width:100px;border:none;' readonly/></div>';
                }else {
                    contentHtml += '<div class="col-sm-3"><img src="images/ventilate.gif" height="80px" width="80px"/>' +
                        '<input value="'+compressedAir_description+'" style='width:100px;border:none;' readonly/></div>';
                }
                contentHtml += '<div class="col-sm-2"></br><img src="images/map.png" height="30px" width="30px" ' +
                    '='jf_map("compressedAir"+'+compressedAir_id+')'/></div>'+
                    '<div class="col-sm-7"></br><input value="'+compressedAir_data+'" style="border:none;" readonly/></div>';
                contentHtml += '</div>';
            }
            contentHtml += '</div>';
            html += '<div class="row col-sm-12">'+
                '<div class="col-sm-1 backdrop compressedAir_div" ='jf_navigation("compressedAir")'>' +
                '<span class="span_font"></br>壓風系統</span></div>' +
                '<div class="col-sm-11">' +
                contentHtml+
                '</div>'+
                '</div>';
        }

        if("transport" in obj) {
            var transport = obj.transport;
            var contentHtml = '';
            contentHtml += '<div class="row col-sm-12 transport_content">';
            for (var i = 0; i < transport.length; i++) {
                transport_id = transport[i].id;
                transport_state = transport[i].state;
                transport_data = transport[i].data;
                transport_description = transport[i].description;
                contentHtml += '<div class="row" style="width: 420px">';
                if(transport_state==0) {
                    contentHtml += '<div class="col-sm-3"><img src="images/transport.png" height="80px" width="80px"/>' +
                        '<input value="'+transport_description+'" style='width:100px;border:none;' readonly/></div>';
                }else {
                    contentHtml += '<div class="col-sm-3"><img src="images/transport.gif" height="80px" width="80px"/>' +
                        '<input value="'+transport_description+'" style='width:100px;border:none;' readonly/></div>';
                }
                contentHtml += '<div class="col-sm-2"></br><img src="images/map.png" height="30px" width="30px" ' +
                    '='jf_map("transport"+'+transport_id+')'/></div>'+
                    '<div class="col-sm-7"></br><input value="'+transport_data+'" style="border:none;" readonly/></div>';
                contentHtml += '</div>';
            }
            contentHtml += '</div>';
            html += '<div class="row col-sm-12">'+
                '<div class="col-sm-1 backdrop transport_div" ='jf_navigation("transport")'>' +
                '<span class="span_font"></br>皮帶運輸</span></div>' +
                '<div class="col-sm-11">' +
                contentHtml+
                '</div>'+
                '</div>';
        }

        if("broadcast" in obj) {
            var broadcast = obj.broadcast;
            var contentHtml = '';
            contentHtml += '<div class="row col-sm-12 broadcast_content">';
            for (var i = 0; i < broadcast.length; i++) {
                broadcast_id = broadcast[i].id;
                broadcast_state = broadcast[i].state;
                broadcast_data = broadcast[i].data;
                broadcast_description = broadcast[i].description;
                contentHtml += '<div class="row" style="width: 420px">';
                if(broadcast_state==0) {
                    contentHtml += '<div class="col-sm-3"><img src="images/pump.png" height="80px" width="80px"/>' +
                        '<input value="'+broadcast_description+'" style='width:100px;border:none;' readonly/></div>';
                }else {
                    contentHtml += '<div class="col-sm-3"><img src="images/pump.gif" height="80px" width="80px"/>' +
                        '<input value="'+broadcast_description+'" style='width:100px;border:none;' readonly/></div>';
                }
                contentHtml += '<div class="col-sm-2"></br><img src="images/map.png" height="30px" width="30px" ' +
                    '='jf_map("broadcast"+'+broadcast_id+')'/></div>'+
                    '<div class="col-sm-7"></br><input value="'+broadcast_data+'" style="border:none;" readonly/></div>';
                contentHtml += '</div>';
            }
            contentHtml += '</div>';
            html += '<div class="row col-sm-12">'+
                '<div class="col-sm-1 backdrop broadcast_div" ='jf_navigation("broadcast")'>' +
                '<span class="span_font"></br>廣播系統</span></div>' +
                '<div class="col-sm-11">' +
                contentHtml+
                '</div>'+
                '</div>';
        }

        if("video" in obj) {
            var video = obj.video;
            var contentHtml = '';
            contentHtml += '<div class="row col-sm-12 video_content">';
            for (var i = 0; i < video.length; i++){
                video_id = video[i].id;
                video_state = video[i].state;
                video_data = video[i].data;
                video_description = video[i].description;
                contentHtml += '<div class="row" style="width: 420px">'+
                    '<div class="col-sm-3"><img src="images/video.png" height="80px" width="80px" ='jf_video("video"+'+video_id+')'/>' +
                    '<input value="'+video_description+'" style="width:100px;border:none;" readonly/></div>' +
                    '</div>';
            }
            contentHtml += '</div>';
            html += '<div class="row col-sm-12">'+
                '<div class="col-sm-1 backdrop video_div" ='jf_navigation("video")'>' +
                '<span class="span_font"></br>視頻系統</span></div>' +
                '<div class="col-sm-11">' +
                contentHtml+
                '</div>'+
                '</div>';
        }

        html += '<div class="row col-sm-12">' +
            '<div class="col-sm-1 backdrop" style="height: 40px"></div>' +
            '<div class="col-sm-11 backdrop">' +
            '<span>2015-2025  www.baidu.com</span>' +
            '</div>' +
            '</div>';
        $("#content").append(html);
    }

    //地圖點擊事件
    function jf_map(id) {
        alert(id);
    }

    //菜單欄點擊事件
    function jf_navigation(str) {
        alert(str);
    }

    //視頻點擊事件
    function jf_video(id) {
        alert(id);
    }

    //設置div高度
    function jf_setHeight() {
        $(".pump_div").css("height",$(".pump_content").height()+5);
        $(".ventilate_div").css("height",$(".ventilate_content").height()+5);
        $(".compressedAir_div").css("height",$(".compressedAir_content").height()+5);
        $(".transport_div").css("height",$(".transport_content").height()+5);
        $(".broadcast_div").css("height",$(".broadcast_content").height()+5);
        $(".video_div").css("height",$(".video_content").height()+5);
    }
</script>
</body>
</html>