jQuery XML 응답으로 HTML 테이블을 작성하십시오
-
19-09-2019 - |
문제
JQuery Ajax 요청 (XML로 반환)의 응답을 통해 반복하려고합니다.
그 응답으로, 나는 3 개의 열이있는 HTML 테이블을 만들고 있습니다 (무제한 수의 행이 가능). 4 번째 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');
}
});
});
웹 서비스의 예제 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