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

Question

我正在尝试在 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 名员工）的文件的一小部分：

  <!--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 名员工和仅显示一个部门之间过滤此表。我已经准备好下拉菜单，但我想我会把那一点信息放在那里，以防这意味着它必须以不同的方式编码。

非常感谢任何帮助，

Answer 1

1.使用客户端模板

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

http://handlebarsjs.com/

2。将xml转换为json

唯一的问题是 Handlebars 需要 JSON 数据而不是 XML。您也可以尝试将 XML 转换为 JSON：

http://goessner.net/download/prj/jsonxml/

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