在研发过程中,我们有时候需要在页面弹出框中展示表格数据,这就需要将JSON数据循环,遍历到一个Table里面,具体代码如下:
JS:
function LoadFun() {
$("#detail").html("");
var html = "";
html += "<table style=\"width: 100%; background-color: #fff; margin: 0 auto; border-left: 0;\"cellspacing=\"0\" cellpadding=\"3\" >";
html += "<tr style=\"background-color: #F7F7F7; height: 30px; font-weight: bold;\">";
html += "<td align=\"left\">物流公司</td>";
html += "<td align=\"left\">对方物流公司</td>";
html += "<td align=\"center\" style=\"border-right: 0;\">操作</td>";
html += "</tr>";
$.post("Logistic.aspx", { lei: "LoadFun", storeroomId: $("#storeroomId").val() }, function (data) {
var obj = jQuery.parseJSON(data);
$.each(obj.list, function (i, item) {
html += "<tr οnmοuseοver=\"this.style.backgroundColor=\'#C6D6E7\'\" οnmοuseοut=\"this.style.backgroundColor=\'#ffffff\'\" style=\"height: 30px;\">";
html += " <td align=\"left\">" + item.Title + "</td>";
html += " <td align=\"left\">" + item.LogisticApiTitile + "</td>";
html += "<td align=\"center\"> <a href=\"javascript:;\" class=\"redbutton\" οnclick=\"Del(\'" + item.id + "\')\">删除</a></td>";
html += "</tr>";
});
html += "</table>";
$("#detail").html(html);
}).error(function (request, status, error) {
html += "</table>";
$("#detail").html(html);
});
}
HTML:相当于一个容器,把JS拼接的Table放入这里
<div id="detail">