动态构建HTML

最新推荐文章于 2024-09-13 17:32:25 发布
最新推荐文章于 2024-09-13 17:32:25 发布
阅读量77 收藏
点赞数
文章标签： json python java
原文链接：https://my.oschina.net/u/4006148/blog/2254121
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

解析json数据动态构建表格

代码实例

<%@ 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>

å¾çæè¿°

转载于:https://my.oschina.net/u/4006148/blog/2254121

weixin_34126557
关注
easyui的data-options在动态构建Html时的使用
luohuajiexiejuan的专栏
01-10 1万+
var count=20000;         function AddAdv() {            var  tmp='<span class="sp_401">上传';            tmp+='*标题： *类别：<input id="ct'+count+'" value="0" class="easyui-combotree" style="width:
HTML5从零开始构建HTML 5 Web页面
weixin_34109408的博客
12-16 207
HTML 5是时下Web开发领域炒得火热的一个术语，是的，很多人都看好它，也有很多业内知名公司开始正式使用HTML 5重新构建自己的网站，如YouTube开始使用HTML 5视频，Google 已经弃用自家的Gears，开始全面拥抱HTML 5实现离线解决方案，各大浏览器厂家也纷纷开始支持HTML 5，连被人诟病的微软也声称要在IE 9中增加对HTML 5的支持。本文打算...
构建HTML5结构（一）
qq_43468891的博客
05-23 440
构建HTML5结构 1.1定义文章块 article元素表示文档，页面中独立的，完整的可以独自被外部应用的内容。可以是博客文章，论坛帖子，用户评论等。 article元素有标题，放在header元素里面。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt...
init: function (){}方法的写法原因
10-25 1万+
最近在做九宫格的抽奖，在看别人写的代码时看到这样的代码 var lottery={ index:-1, count:0, ......... init:function(id){ }, roll:function(){
HTML快速入门及简单的创建网页实战演示
m0_73770225的博客
11-26 4183
HTML文件结构HTML元素第一个HTML代码添加标题添加并修改图片添加超链接修改网页标题内容居中
js 动态创建HTML元素
lanzhengwu的专栏
12-25 2万+
今天有个朋友要帮她完成一个小小的效果,发了点时间做了下,也不知道能不能达到要求,先帖了上来,下面是要求: 代码:textarea cols="60" rows="12">textarea> br/>选择答题数目:select  name="select1" id="select1" onchange="change1(this);">option value=0>请选择option
javascript动态创建html内容
遇见更好的自己
03-04 980
Document.write() 把字符串插入到文档里 <html> <head> <title>Test</title> <script type="text/javascript"> </head> <body> <div id="testdiv"> <p>This is mycontent.</p> </div> <script type="text/javascript"
node-html-menu:构建呈现为 html 或 json 的服务器端动态菜单
07-04
《构建服务器端动态菜单——基于Node.js的HTML与JSON实现》 在当今互联网技术日新月异的时代，网站和应用程序的交互性与用户体验至关重要。一个高效、易用的菜单系统可以极大地提升用户对平台的满意度。本文将深入...
gomodest-template:使用Go，htmltemplate和javascript快速构建动态Web应用程序的模板
04-30
模板，可在Go，HTML和脚本中构建动态Web应用程序。 为什么 ？ 大多数情况下，使用您已经知道的工具（Go，HTML，CSS，Vanilla Javascript）构建动态网站。 使用可加快响应式和美观UI的原型制作速度。 大部分互动都...
HTML+CSS+JS构建的电商网站页面（源码）
07-14
在本项目中，"HTML+CSS+JS构建的电商网站页面（源码）"是一个针对初学者和学生设计的Web前端开发实践项目。这个项目利用HTML、CSS和JavaScript这三种核心技术来创建一个基本的电商网站界面，是学习前端开发的重要...
不明飞行物：使用Javascript来构建动态网页。 其他工具包括引导程序，HTML和CSS
02-27
在构建动态网页的过程中，JavaScript扮演着至关重要的角色。它是一种客户端脚本语言，可以在用户的浏览器上运行，使得网页不仅有静态展示，还能实现交互性、响应性和实时更新等功能。JavaScript的核心概念包括变量、...
动态创建HTML内容
weixin_33911824的博客
07-04 1520
document.write（）方法 document.write方法可以方便快捷的把字符串插入到文档里。它最大的缺点是违背了”分离javascript“原则。即使把document.write语句挪到外部函数里，你也还是需要在HTML文档的<body>部分使用<script>标签才能调用哪个函数。 innerHTML属性 innerHTML属性可以用来读、写某...
用js动态生成html页面
热门推荐
qq_33417237的博客
04-04 4万+
首先思路明确：生成的元素是一个完整的DOM对象；这些DOM对象的属性可以是字符串，xml文件，也可以是json格式的数据，存储在后台或者其它位置；通过层层解析，顺着DOM层级关系动态创建在html文档流中；这些html文档放于不同的模板文件中相应生成不同样式的效果。以下就json格式存储的数据，简单示例一下：第一步：获取attribute数据var url = window.android.get...
关于动态创建html中的标签
夕降巫咸的博客
06-26 7501
主要记录如何动态创建标签，以及给标签赋样式。最近的项目需求就是需要根据后段返回的数据长度来动态创建div以及span等标签。----2018-06-26 1、首先需要在界面上创建一个父标签，设置id为mian     在js代码中我们要先通过id查找页面上的标签 var parentDiv = document.getElementById("main");//parentDiv既为m...
动态生成HTML元素并为元素追加属性
fredaouyang的博客
02-22 1万+
动态生成HTML元素的方法由三种： 第一种：document.createElement()创建元素，再用appendChild( )方法将元素添加到指定节点; 添加a元素： var link = document.createElement('a'); link.setAttribute('href','#'); li
HTML5+中动态构建列表并填充数据
weixin_34192732的博客
02-12 980
部分代码参考demo----《历史上的今天》。 感谢作者的分享，愿好人一生平安，虽然只有两个页面，但是通过这个示例让我学会了5+中如何动态构建列表并填充数据，非常实用。 html部分： <body> <header class="mui-bar mui-bar-nav"> ...
HTML页面构建过程
weixin_42239390的博客
07-07 2559
学习前端，HTML页面构建过程是一个入门的问题，每次在地址栏输入网址，到网址渲染出来，这过程时间虽短，但是你的浏览器和远端服务器却做了很多事情，接下来就来了解一下期间发生的事情。举个栗子：你在网址栏输入：“www.baidu.com”一、页面获取用户输入url地址，浏览器根据域名寻找IP地址浏览器向服务器发送http请求服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代...
Gson转换
最新发布
09-13 336
gson格式转换.create());@Overridetry {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值