JS 动态生成如下效果如何实现

橙色阳光 2016-10-17 03:30:54

JS代码中如何根据后台数组的长度生成动态的table
for (var i = 0; i < retMsg.length; i++)
循环中如何实现?
有更好的思路也可以



$.ajax({

                type: "POST",

                url: "QYZZGK_View.aspx",

                data: { Trans: "GetJCYYZZPM", bm: qxbm, title: "" },

                cache: false,

                dataType: "json",

                //async: true,

                success: function (retMsg) {

                    try {

                        //console.log(retMsg);

                        for (var i = 0; i < retMsg.length; i++) {



                        }

                    } catch (e) {

                        alert("获取失败");

                    }

                },

                error: function (XMLHttpRequest, textStatus, errorThrown) {

                    //alert(textStatus);

                }

            });

页面代码



<div id="Down1" class="Down-Left">

                    <span class="titleFontTop">XXXXXXXXXXX</span><br />

                    <span>排名TOP10</span>

                    <table>

                        <tr>

                            <td style="text-align: left; width: 200px;">

                                <span class="spanbackimage" id="SerNumbe1">1</span>

                                  <span id="tAddressName1">鹿城区</span></td>

                            <td style="text-align: right"><span id="tNumber1">95%</span></td>

                        </tr>

                        <tr>

                            <td colspan="2" style="border-bottom: #cccccc 2px dashed;"></td>

                        </tr>



                        <tr>

                            <td style="text-align: left; width: 200px;">

                                <span class="spanbackimage" id="SerNumbe2">2</span>

                                  <span id="tAddressName2">瓯海区</span></td>

                            <td style="text-align: right"><span id="tNumber2">93%</span></td>

                        </tr>

                        <tr>

                            <td colspan="2" style="border-bottom: #cccccc 2px dashed;"></td>

                        </tr>

                    </table>

                </div>

运行效果

达到效果

...全文

129 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

大叔爱洗澡 2016-10-17

打赏
举报


var html += ' <tr>'+
                        '<td style="text-align: left; width: 200px;">'+
			'<span class="spanbackimage" id="SerNumbe1">1</span>'+
		        '  <span id="tAddressName1">鹿城区</span></td>'+
			'<td style="text-align: right"><span id="tNumber1">95%</span></td>'+
		'</tr>';
$("table").append(html);

span里换成相应的内容