我完全不懂 html、css、javascript 和编程。请耐心等待。
我正在尝试使用 jquery 填充我的表。数据将来自 xml 文件。
football_player.xml
:
<?xml version="1.0" encoding="UTF-8"?>
<football_player>
<name>Cristiano Ronaldo</name>
<club>Real Madrid</club>
<number>7</number>
<country>Portugal </country>
<name>Fernando Torres </name>
<club>Chelsea </club>
<number>9</number>
<country>Spain</country>
<name>Iker Casillas</name>
<club>Real Madrid </club>
<number>1</number>
<country>Spain</country>
<name>David Beckham</name>
<club>Los Angeles Galaxy</club>
<number>23</number>
<country>England</country>
</football_player>
我的 html 表格:
<table>
<thead>
<tr>
<th>Name</th>
<th>Club</th>
<th>Number</th>
<th>Country</th>
</tr>
</thead>
<tbody>
</tbody>
</tfoot>
</tfoot>
</table>
我的 javascript/jquery 脚本:
$(document).ready(function () {
$.ajax({
type: "GET",
url: "football_player.xml",
dataType: "xml",
success: function(xml) {
$(xml).find("football_player").each(function () {
$("table tbody").append("<tr>");
$("table tbody").append("<td>" + $(this).find("name").text() + "</td>");
$("table tbody").append("<td>" + $(this).find("club").text() + "</td>");
$("table tbody").append("<td>" + $(this).find("number").text() + "</td>");
$("table tbody").append("<td>" + $(this).find("country").text() + "</td>");
$("table tbody").append("</tr>");
});
}
});
});
我发誓我真的是菜鸟。我不知道我在做什么。请帮忙。我真的很想学习。提前致谢。
最佳答案
示例 XML:
<?xml version="1.0" encoding="utf-8" ?>
<RecentBooks>
<Book>
<Title>My Cool Book Title</Title>
<Description>The my cool book is possibly the best cool book in that any developer could use to be a great web designer.</Description>
<Date>12/1/2010</Date>
</Book>
<Book>
<Title>Another PHP book</Title>
<Description>Learn everything about PHP with 'Another PHP book,' your ultimate guide to the ins and outs of PHP.</Description>
<Date>4/1/2010</Date>
</Book>
<Book>
<Title>jQuery Techniques</Title>
<Description>jQuery techniques runs you through real life examples of jQuery from beginner to expert</Description>
<Date>6/2/2010</Date>
</Book>
<Book>
<Title>MySQL Database Book</Title>
<Description>Brush up your knowledge with the best MySQL database book on the market. </Description>
<Date>14/2/2010</Date>
</Book>
</RecentBooks>
还有 HTML 和 jquery。
$(document).ready(function () {
$.ajax({
type: "GET",
url: "books.xml",
dataType: "xml",
success: xmlParser
});
});
function xmlParser(xml) {
$('#load').fadeOut();
$(xml).find("Book").each(function () {
$(".main").append('<div class="book"><div class="title">' + $(this).find("Title").text() + '</div><div class="description">' + $(this).find("Description").text() + '</div><div class="date">Published ' + $(this).find("Date").text() + '</div></div>');
$(".book").fadeIn(1000);
});
}
<div class="main">
<div align="center" class="loader"><img src="loader.gif" id="load" width="16" height="11" align="absmiddle"/></div>
</div>
<div class="clear"></div>
你可以通过这个例子,你会得到同样的想法
关于xml - jquery - 如何获取 xml 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10811511/