三个使用js拼接前端界面的技巧

	$.ajax({

			url : "workbench/activity/getRemarkListByAid.do",
			data : {
				//在js代码当中想要使用el表达式必须套用在字符串当中
				"activityId":"${a.id}"


			},
			type : "get",
			dataType : "json",
			success : function (data) {

				/*

				   data
				       [{备注1},{2},{3}]

				 */
				var html="";
				$.each(data,function (i,n) {

					/*

					  href="javascript:void(0);
					       将超链接禁用,只能以触发事件的形式来操作

					 */

				html +='<div class="remarkDiv" style="height: 60px;">';
				html +='<img title="zhangsan" src="image/user-thumbnail.png" style="width: 30px; height:30px;">';
				html +='<div style="position: relative; top: -40px; left: 40px;" >';
				html +='<h5>'+n.noteContent+'</h5>';
				html +='<font color="gray">市场活动</font> <font color="gray">-</font> <b>${a.name}</b> <small style="color: gray;"> '+(n.editFlag==0 ? n.createTime:n.editTime)+' 由'+(n.editFlag==0 ? n.createBy:n.editBy)+'</small>';
				html +='<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">';
				html +='<a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #FF0000;"></span></a>';
				html +='&nbsp;&nbsp;&nbsp;&nbsp;';
				html +='<a class="myHref" href="javascript:void(0);" onclick="deleteRemark(\''+n.id+'\')"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #FF0000;"></span></a>';
				html +='</div>';
				html +='</div>';
				html +='</div>';
					
				})


				//(1)从下面的标签往上追加是调用before()方法。
				//(2)从上面的标签往下追加是使用append()方法。
				// (3)还可以自己创建一个标签(div)之后获取标签(div)的id,之后 .html()往里边加内容。
				$("#remarkDiv").before(html);





			}

		})
function deleteRemark(id) {
		alert(id);

看图片:

源代码在上边,这个图片中有三个重要的知识点(小技巧):

(1)在js代码当中想要使用el表达式必须套用在字符串当中,图中1处代码本就是在' '中所以可以这样写。

(2)在动态生成的前端标签中想要使用作用域对象中的属性必须放到字符串中。

onclick="deleteRemark('+n.id+')  (这样直接拼接不行)。

(3)在原有标签上下加入新的标签在js代码中怎么实现?


                 1.从下面的标签往上追加是调用before()方法。
                 2.从上面的标签往下追加是使用append()方法。
                 3.还可以自己创建一个标签(div)之后获取标签(div)的id,之后 .html()往里边加内容。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值