js动态生成添加html

最新推荐文章于 2022-07-28 11:32:41 发布

Hello______world

最新推荐文章于 2022-07-28 11:32:41 发布

阅读量468

点赞数

分类专栏： js 文章标签： html ajax JavaScript ViewUI

本文链接：https://blog.csdn.net/hello______world/article/details/84773377

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

dongtaitianjia.js


$(function() {
	var addKeyAlarmNote = function(){
		var node = "<div id='keyAlarm' class='keyAlarmBox'>"
			+"<span>共有</span>"
			+"</div>";
		$("#box").append($(node));
		$("#gs_container").append($(node).show());
	}
	addKeyAlarmNote();

	//将告警拼成html

	var getList = function(data){
		var lis ="";
		if(data && data.data.list.length > 0){
			for(var i = 0; i <data.data.list.length;i++){
				console.log("2");
				var li = getAlarmLi(data.data.list[i]);
				lis += li;
			}
		}
		return lis;
	}

	$.ajax({url:'MineJs/ajax3.json',
    	type:'post',
    	async:true,
    	success:function(data){
    		var lis = getList(data);
    		$("#keyAlarmContent").append(lis);
    	}});

	//获取电站类型对应的图片
	var getStationTypeImg =  function(type){
		if(type == 1){
			return "image/map_point_1X0.png";
		}else if(type = "2"){
			return "image/map_point_220.png";
		}
	}

	var getAlarmLi = function(item){
		var node = "<li class='stationsAlarm' sId ='"+item.stationCode+"'>"
		+ "<img src='" + getStationTypeImg(item.cominedType) + "'/>"
		+"<p class = 'descr'>"
		+"<span>[</span>"
		+" <span class='stationType' style='font-weight:800;'>" + (item.cominedType)+"</span>"
		+"<span>]</span>"
		+ "<span class='stationName'>" + item.stationName + "</span>"
        + "<input type='hidden' name='sid' value='" + item.stationCode + "' />"
        + "</p>"
        + "<div class='alarmNums'>"
        + "<div class='alarmLevel levle2' style='border-radius: 5px 0 0 5px;'>" + item.severityLevel['2'] + "</div>"
        + "<div class='alarmLevel levle3'>" + item.severityLevel['3'] + "</div>"
        + "</div>"
		+"</li>";
		return node;
	}




});


dongtaitianjia.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="MineJs/dongtaitianjia.js"></script>
 <script type="text/javascript" src="MineJs/ajax.js"></script>
</head>
<body>
<div class="alarm" id="box">
 <span>第一条数据</span>
 <div id="keyAlarmContent" style="height:800px;width:500px">
 </div>
</div>
</body>
</html>

ajax3.json
{"success":true,"message":null,"data":{"list":[{"id":null,"optimisticLockVersion":null,"stationCode":"D5EEAB8D1FD72BC6E70F2FB050DD9EC8","stationName":"qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"BE6C528112A8ABF22F12D4DF25F9EBE5","stationName":"hyhy","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"C77CF68F638F06443F8AF1F02DE1B0E3","stationName":"kl","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"DEC0A66791F9943CE286855C78EEDD6A","stationName":"gx","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"73D46007AFD40281125B3AD9E57268D5","stationName":"CSL","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"4C60F42E449C2D3B05ACD3108225AF8E","stationName":"一个很长的狮吼功内容可以显示一些什么内容大家经鉴定该基地及国际景点基金降低基金","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}}],"totalMap":{"1":0,"2":0,"3":0},"total":8,"pageNo":1,"pageSize":6,"pageCount":2},"errorMsg":{}}

Hello______world

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js动态生成添加html

dongtaitianjia.js[code="java"]$(function() { var addKeyAlarmNote = function(){ var node = "" +"共有" +""; $("#box").append($(node)); $("#gs_container").append($(node).show());
复制链接

扫一扫