jq each遍历，HTML拼接，str定义，点击获取当前id

最新推荐文章于 2024-04-23 15:57:32 发布

王子様~

最新推荐文章于 2024-04-23 15:57:32 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQ 文章标签： jq

本文链接：https://blog.youkuaiyun.com/qq_31424825/article/details/79072842

JQ 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的欠费记录显示及发票详情动态加载的方法。通过从本地存储获取欠费数据并利用jQuery操作DOM来动态生成欠费记录列表与发票详情视图。适用于需要展示历史欠费及发票信息的停车收费管理系统。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：LoveEmperor-王子様

var arrearsMsg = window.localStorage.getItem("arrearsMsg");

var resData = eval("("+arrearsMsg+")");

if (resData.arrearscount>0){



   $("#noDatacell").hide();
   var str1='';
   $.each(resData.data,function(i) {
      str1 += '<label class="checkbox" style="float: left;margin-left: 0.5rem;" >'+
         '<input type="checkbox" name="subBox"  checked="" style="width: 20px;height: 20px;" value="'+i+'"/>'+
         '</label>';
      str1 += '<div class="subconcell">'+'<span>路段泊位：</span>'+'<span>'+resData.data[i].roadName+resData.data[i].berthno+'</span>'+'</div>';
      str1 += '<div class="subconcell">'+'<span>入场时间：</span>'+'<span>'+resData.data[i].cometime+'</span>'+'</div>';
      str1 += '<div class="subconcell">'+'<span>出场时间：</span>'+'<span>'+resData.data[i].cometime+'</span>'+'</div>';
      str1 += '<div class="subconcell">'+'<span>欠费金额：</span>'+'<span>'+resData.data[i].paymoney+'</span>'+'</div>';
      str1 += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;width: 79.3%;margin-right: 20px" />';

      $("#containerDiv").html(str1);
   });
}

需要jq版本大于2

<div id="mainView"></div>
 

function domPlay() {

    // $("#noDatacell").hide();
    var str1='';
    $.each(resRecordsData,function(i,subobj) {
        str1 += '<div id="'+subobj.id+'" class="edRecordView">';
        str1 += '<div class="recorditem" style="margin-top: 0.2rem">';
        str1 += '<div class="subinvoicecell">'+ '<img src="../img/times.png" class="sublefticon" >'+'<span class="opentime">开票时间</span>'+'<span class="opentime2">'+timeStamp2String(subobj.createTime)+'</span>'+'<span class="openstatus">开票中</span>'+'<img class="subrighticon" src="../img/rightarrows.png">'+'</div>';
        str1 += '<div class="subinvoicecell">'+'<span class="subleftmoney">'+"￥"+subobj.kpMoney+'</span>'+'<button class="titletypebtn">个人</button>'+'</div>';
        str1 += '</div>';
        str1 += '</div>';
        $("#mainView").html(str1);
    });
}
$("#mainView").on("click",".edRecordView",function () {
    var cellid = $(this).attr("id");
    invoiceDetailsFunc(cellid);
});