tempalte.js遍历对象

最新推荐文章于 2022-10-31 08:58:39 发布

原创最新推荐文章于 2022-10-31 08:58:39 发布 · 771 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#tempalte.js #对象

本文介绍了一种使用HTML、jQuery和模板引擎展示代付交易数据的方法。通过将交易类型、金额、数量及手续费等信息组织成表格形式，实现了数据的清晰呈现。文中展示了具体的HTML结构和JavaScript代码，用于动态生成和更新交易数据。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
<script src="template.js"></script>
</head>
<body>
<div class="main">
        <div class="msgtable">
                <p class="condition">今日代付情况</p>
                <div class="itemtable">
                    <div class="today">
                        <span>今日代付</span>
                    </div>
                    <div class="list">
                        <ul class="ulList">
                            <li>交易类型</li>
                            <li>交易金额</li>
                            <li>交易数量</li>
                            <li>手续费</li>
                        </ul>
                    </div>
                </div>
            </div>
</div>

</body>

<script id="temp" type="text/html">
{{each list as item i}}
        <li>{{item.amount}}</li>
        <li>{{item.count}}</li>
        <li>{{item.pay_type}}</li>
        <li>{{item.merchant_fee}}</li>

{{/each}}
</script>


<script>

//最好是数组对象
var data={
list:[
{amount: 39, count: 1, pay_type: " 支付宝扫码", merchant_fee: 0.56},
{amount: 65, count: 10, pay_type: " H5扫码", merchant_fee: 1.56}
]
}
var html=template('temp',data);
$(".ulList").append(html);//插入div标签里
</script>
</html>