0
我试图在JQuery中创建一个表格4列宽和16行高（16x4）。该表适用于“见员工”页面，其上有16名员工。这个页面包含诸如他们的名字，小图片，他们在公司中的位置以及描述它们的小型信息等信息。如何使用JQuery创建表并将XML数据插入单元格？
Name Name Name Name
Image Image Image Image
Position Position Position Position
Blurb Blurb Blurb Blurb
NEW ROW
Name Name Name Name
Image Image Image Image
Position Position Position Position
Blurb Blurb Blurb Blurb
etc....
的信息是从一个XML文件中读：这是使每一块信息（姓名，他们的PIC，位置和Blurb的）都包含在自己单独的行，像这样以一种方式布局。下面是一个包含整个管理团队的文件的一小部分（4名）：
<!--Management-->
<management>
<name>Daniel Duffy</name>
<position>Manager of Mechanical Services</position>
<blurb>Over a decade of mechanical experience, nine of those years working souly on GM vehicles, Dan knows the ins and outs of almost all North American GM vehicles like the back of his hand.</blurb>
</management>
<management>
<name>Kelly Assise</name>
<position>Manager of Customer Service</position>
<blurb>A degree in Communication Studies and an outgoing upbeat attitude makes Kelly the perfect candidate for our Customer Service Dept.</blurb>
</management>
<management>
<name>Aly McAvoy</name>
<position>Manager of Sales</position>
<blurb>A well-rounded personality, with an aptitude for number crunching and excellent financial forsight, Aly McAvoy comes to us with over 6 years experience in the auto parts field.</blurb>
</management>
<management>
<name>Rich Sarlous</name>
<position>Manager of Marketing</position>
<blurb>Business and Communication careers run in the family. Rich Sarlous is no exception. Fresh out of college, smart as a whip, graduating with a Masters in Business/Marketing.</blurb>
</management>
这将通过创建4倍（对所有16名员工）。以下是我希望删除的当前代码的示例。
<div class="infoBlurb"><table id="employeeTable">
<!--Directors-->
<tr><td class="employeeName1"></td><td class="employeeName2"></td><td class="employeeName3"></td><td class="employeeName4"></td></tr>
<tr><td class="employeePic1"></td><td class="employeePic2"></td><td class="employeePic3"></td><td class="employeePic4"></td></tr>
<tr><td class="employeePos1"></td><td class="employeePos2"></td><td class="employeePos3"></td><td class="employeePos4"></td></tr>
<tr><td class="employeeBlurb1"></td><td class="employeeBlurb2"></td><td class="employeeBlurb3"></td><td class="employeeBlurb4"></td></tr>
具有3个以上的那些行的块看起来杂乱无章，因此为什么我要创建使用JQuery表。必须有办法做到这一点，而不必为每个数据位创建16个不同的单元类，为每个单元创建16个不同的CSS类。
我已经写了正确的Jquery太遍历XML文件并显示所有我写像这样在HTML中的数据：
$(document).ready(function() {
$.ajax({
type: "GET",
url: "../stylesheets/employees.xml",
dataType: "xml",
success: function (xml) {
var x = 1;
$(xml).find('directors').each(function() {
var name = $(this).find('name').text()
$(".employeeName" + x).text(name);
var position = $(this).find('position').text()
$(".employeePos" + x).html(position);
var blurb = $(this).find('blurb').text()
$(".employeeBlurb" + x).html(blurb);
x++
});
$(xml).find('management').each(function() {
var name = $(this).find('name').text()
$(".employeeName" + x).text(name);
var position = $(this).find('position').text()
$(".employeePos" + x).html(position);
var blurb = $(this).find('blurb').text()
$(".employeeBlurb" + x).html(blurb);
x++
});
$(xml).find('supervisor').each(function() {
var name = $(this).find('name').text()
$(".employeeName" + x).text(name);
var position = $(this).find('position').text()
$(".employeePos" + x).html(position);
var blurb = $(this).find('blurb').text()
$(".employeeBlurb" + x).html(blurb);
x++
});
$(xml).find('juniorSupervisor').each(function() {
var name = $(this).find('name').text()
$(".employeeName" + x).text(name);
var position = $(this).find('position').text()
$(".employeePos" + x).html(position);
var blurb = $(this).find('blurb').text()
$(".employeeBlurb" + x).html(blurb);
x++
});
}
});
});
但我不知道如何将HTML成或者如果我什至做得对..
最重要的是，我希望能够过滤显示所有16名员工之间的表格，以便使用下拉菜单显示一个部门。我已经准备好了下拉菜单，但是我想我会在那里丢掉那些信息，以防止它意味着它必须以不同的方式编码。
任何帮助是非常赞赏，
约XML，JSON转换的好文章的链接你试试下面我的建议？它对你有帮助吗？ – deepflame 2013-03-15 04:25:18