我正在尝试在 JQuery 中创建一个 4 Columns Wide 和 16 Rows High (16x4) 的表。该表用于“会见员工”页面，上面有 16 名员工。此页面包含他们的姓名、一张小图片、他们在公司的职位以及描述他们的小简介等信息。这是以一种方式布局的，因此每条信息（名称、他们的图片、位置和简介）都包含在它们自己的单独行中，如下所示：
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 文件中读入的。这是包含整个管理团队（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 名员工和仅显示一个部门之间过滤此表。我已经准备好下拉菜单，但我想我会把那一点信息放在那里，以防这意味着它必须以不同的方式编码。
任何帮助深表感谢，