如何使用JQuery创建表并将XML数据插入单元格？

我试图在JQuery中创建一个4列宽、16行高（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名员工）的文件的一小部分：

但我不知道如何将HTML融入其中，或者我是否做对了

除此之外，我希望能够使用下拉菜单在显示所有16名员工和仅显示一个部门之间筛选此表。我已经准备好了下拉菜单，但我想我会把这些信息放在那里，以防这意味着它必须用不同的编码

---

非常感谢您的帮助，
1。使用客户端模板

为了让您的生活更轻松，我建议您使用客户端模板。 这样以后更改布局就更容易了，而且您不必深入研究jQuery代码。车把是一个很好的解决方案：

2。将xml转换为json

唯一的问题是Handlebar需要的是JSON数据，而不是XML。您也可以尝试使用以下方法将XML转换为JSON：

---

底部还有一个关于XML-JSON转换的好文章链接

您是否尝试了我下面的建议？这对你有帮助吗？

  <!--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>

<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>

$(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++
            });
        }
    });
});