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代码。把手是一个很好的解决方案：

http://handlebarsjs.com/

<强> 2。将xml转换为json

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

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

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

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

1 个答案: