如何使用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文件中讀：這是使每一塊信息（姓名，他們的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名員工之間的表格，以便使用下拉菜單顯示一個部門。我已經準備好了下拉菜單，但是我想我會在那裏丟掉那些信息，以防止它意味着它必須以不同的方式編碼。

任何幫助是非常讚賞，

Answer 1

1.使用客戶端模板

爲了使您的生活更輕鬆，我會建議你使用客戶端模板。 然後，更改後的佈局會更容易，而且您不必深入查看jQuery代碼。把手是一個很好的解決方案：

http://handlebarsjs.com/

2.將XML轉換爲JSON

的唯一的事情就是車把預計JSON數據不是XML。你可以嘗試將XML轉換成JSON，以及與此：

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

也有在底部