建立HTML表格与jQuery XML响应
-
19-09-2019 - |
题
我试图通过从一个jQuery Ajax请求(返回作为XML)的响应进行迭代。
使用该响应,我建立与3列(能够无限数量的行的)一个HTML表格。一旦第四XML节点/“公司”被发现,它应该开始在表中的新行。 与JS任何帮助,以确定新的行应增加是最赞赏。谢谢!
JS示例:
/* jQuery Ajax Call here */
success: function(xml){
var trow = $("<tr>");
$(xml).find("Company").each(function(index){
var cellData = "<td width=\"33%\" valign=\"top\" ><div class=\"container\">"+
"<div class=\"item\"><a href=\"#\" title=\"\" target=\"\">"+ $(this).attr("Name")+ "</a></div>"+
"<div class=\"description\">"+ $(this).attr("Description") + "</div></div></div></td>";
$(cellData).appendTo(trow);
});
trow.appendTo('#tbl');
}
});
});
从web服务的示例XML响应:
<Companies>
<Company ID="6" Name="Company name 1" Description="Lorem ipsum" />
<Company ID="22" Name="Company name 2" Description="Lorem ipsum" />
<Company ID="28" Name="Company name 3" Description="Lorem ipsum" />
<Company ID="31" Name="Company name 4" Description="Lorem ipsum" />
</Companies>
解决方案
在模运算符是非常适合这样的事情。基本上它除以另一个头号号码和返回余数。所以1 % 4 = 1
和4 % 4 = 0
和8 % 4 = 0
:
success: function(xml){
var trow = $("<tr>"), table = $("#tbl");
$(xml).find("Company").each(function(index){
var cellData = "<td width=\"33%\" valign=\"top\" ><div class=\"container\">"+
"<div class=\"item\"><a href=\"#\" title=\"\" target=\"\">"+
$(this).attr("Name")+ "</a></div>" +
"<div class=\"description\">" + $(this).attr("Description") +
"</div></div></div></td>";
$(cellData).appendTo(trow);
if( (index + 1) % 4 == 0) {
trow.appendTo(table);
trow = $("<tr>");
}
});
if(trow.is(':not(:empty)')) trow.appendTo(table);
}
});
});
我也存储$("#tbl")
在一个变量,以减少查找的数量。
不隶属于 StackOverflow