jQuery的轉換HTML表到XML

Question

我從一個遠程主機，下面的jQuery代碼

 
    var loadUrl = "URL.html"; 
     $("#result") 
     .html(ajax_load) 
     .load(loadUrl + " table.schedule"); 

這給了我下面的HTML

 
<table class="schedule"> 
     <tr> 
       <th>Name</th> 
       <th>column A</th> 
       <th>column B</th> 
     </tr> 
     <tr> 
       <td>1</td> 
       <td>A1</td> 
       <td>B1</td> 
     </tr> 
     <tr> 
     <tr> 
       <td>2</td> 
       <td>A2</td> 
       <td>B2</td> 
     </tr> 
</table> 
<table class="schedule"> 
     <tr> 
       <th>Name</th> 
       <th>column C</th> 
       <th>column D</th> 
     </tr> 
     <tr> 
       <td>3</td> 
       <td>C1</td> 
       <td>D1</td> 
     </tr> 
     <tr> 
     <tr> 
       <td>4</td> 
       <td>C2</td> 
       <td>D2</td> 
     </tr> 
</table> 

的TR & TDS的參數可以改變檢索HTML ，我想檢索列A，B，C，D的數據，並將HTML「轉換」爲列表格式，如下面的XML。

 
<schedule name="1"> 
     <data>A1</data> 
     <data>A2</data> 
</schedule> 
<schedule name="2"> 
     <data>B1</data> 
     <data>B2</data> 
</schedule> 
<schedule name="3"> 
     <data>C1</data> 
     <data>C2</data> 
</schedule> 
<schedule name="4"> 
     <data>D1</data> 
     <data>D2</data> 
</schedule> 

我曾嘗試下面的代碼，它爲我提供了第一列的數據，但它也串接全部來自這兩個表的陣成一個列表。

 
$("#load_get").click(function(){ 
var xml = "<schedule>"; 
$("#result") 
.find("tr").each(function() { 
xml += "<data>"; 
xml += $(this).find("td").eq(1).html() + "\n"; 
xml += "</data>"; 
}); 
xml += "</schedule>"; 
alert(xml); 
}); 

請幫助。

編輯

謝謝Polarblau，Federic &阿爾伯特您的答覆。他們幫助了很多人，抱歉改變了目標，但是如果我可以稍微修改場景。

這是相同的HTML，除了它在第一個TR中有一個標題，有兩個表並且第一列被忽略。

 
<table class="schedule"> 
     <tr> 
       <th>ignore</th> 
       <th>Header1</th> 
       <th>header2</th> 
     </tr> 
     <tr> 
       <td>ignore</td> 
       <td>A1</td> 
       <td>B1</td> 
     </tr> 
     <tr> 
       <td>ignore</td> 
       <td>A2</td> 
       <td>B2</td> 
     </tr> 
</table> 

//second table 

XML我希望有，需要抓住標題（TH），並使用它在TD循環設置名稱屬性，像這樣。

 
<schedule name="Header1"> 
     <data>A1</data> 
     <data>A2</data> 
</schedule> 
<schedule name="Header2"> 
     <data>B1</data> 
     <data>B2</data> 
</schedule> 

//second table xml 

我試過不成功，修改你的解決方案來達到這個目的。

Answer 1

如果我正確理解你的問題，你需要創建循環內的<schedule>元素：

$("#load_get").click(function() { 
    var xml = ""; 
    $("#result tr").each(function() { 
     var cells = $("td", this); 
     if (cells.length > 0) { 
      xml += "<schedule name='" + cells.eq(0).text() + "'>\n"; 
      for (var i = 1; i < cells.length; ++i) { 
       xml += "\t<data>" + cells.eq(i).text() + "</data>\n"; 
      } 
      xml += "</schedule>\n"; 
     } 
    }); 
    window.alert(xml); 
}); 

Answer 2

試試這個：

$(function(){ 
    var xml = ""; 
    $('tr:not(:first)').each(function(i, tr){ 
     $tr = $(tr); 
     var index = $.trim($tr.find('td:first').text()); 
     xml += '<schedule name="'+index+'">'; 
     $tr.find('td:not(:first)').each(function(j, td){ 
      xml += '<data>'; 
      xml += $.trim($(td).text()); 
      xml += '</data>'; 
     }); 
     xml += '</schedule>'; 
    }); 
    alert(xml); 
}); 

Example here.

如果您想使用<thead>和<tbody>你仍然可以稍微簡化它。

Answer 3

而是連接字符串的我想創建一個jQuery對象

var $xml = $("<schedules>"); 
$("tr:has(>td)").each(function() { 
    var $schedule = $("<schedule>"); 
    $xml.append($schedule); 

    $("td", this).each(function(i) { 
     if(i===0) 
      $schedule.attr("name", $(this).text()); 
     else 
      $schedule.append($("<data>").text($(this).text())); 
    }) 
}); 

alert($xml.html()); 

Answer 4

使用這樣簡單的HTML表格轉換成XML： -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="GridView1"> 
 
<tr> 
 
    <th>Class</th> 
 
    <th>1995</th> 
 
    <th>1996</th> 
 
    <th>1997</th> 
 
</tr> 
 
<tr> 
 
    <td>Class1</td> 
 
    <td> 
 
     <select name="ddlStatus""> 
 
      <option value="Phase I">Phase I</option> 
 
      <option selected="selected" value="Phase II">Phase II</option> 
 
      <option value="Phase III">Phase III</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select name="ddlStatus"> 
 
      <option value="Phase I">Phase I</option> 
 
      <option selected="selected" value="Phase II">Phase II</option> 
 
      <option value="Phase III">Phase III</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select name="ddlStatus"> 
 
      <option value="Phase I">Phase I</option> 
 
      <option value="Phase II">Phase II</option> 
 
      <option selected="selected" value="Phase III">Phase III</option> 
 
     </select> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td>Class2</td> 
 
    <td> 
 
     <select name="ddlStatus""> 
 
       <option value="Phase I">Phase I</option> 
 
       <option value="Phase II">Phase II</option> 
 
      <option selected="selected" value="Phase III">Phase III</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select name="ddlStatus"> 
 
       <option value="Phase I">Phase I</option> 
 
       <option selected="selected" value="Phase II">Phase II</option> 
 
      <option value="Phase III">Phase III</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select name="ddlStatus"> 
 
      <option value="Phase I">Phase I</option> 
 
      <option value="Phase II">Phase II</option> 
 
      <option selected="selected" value="Phase III">Phase III</option> 
 
     </select> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
<?xml version="1.0" encoding="utf-8"?> 
 
<Root> 
 
    <Classes> 
 
    <Class Name="Class1"> 
 
     <Data Year="1995" Status="Phase II" /> 
 
     <Data Year="1996" Status="Phase II" /> 
 
     <Data Year="1997" Status="Phase III" /> 
 
    </Class > 
 
    <Class Name="Class2"> 
 
     <Data Year="1995" Status="Phase III" /> 
 
     <Data Year="1996" Status="Phase II" /> 
 
     <Data Year="1997" Status="Phase III" /> 
 
    </Class > 
 
    </ Classes > 
 
</Root> 
 

 
<script> 
 
var xml = '<?xml version="1.0" encoding="utf-8"?>'; 
 
xml = xml + '<Root><Classes>'; 
 

 
$("#GridView1 tr").each(function() { 
 
var cells = $("td", this); 
 
    if (cells.length > 0) { 
 
     xml += "<Class Name='" + cells.eq(0).text() + "'>"; 
 

 
     for (var i = 1; i < cells.length; ++i) { 
 
       
 
       //Need to parse out selected item in dropdown box 
 
       xml += '<Data year="' + $("#GridView1").find("th").eq(i).text() + '" status="' + $("option[selected]",cells.eq(i)).text() + '"/>'; 
 
     } 
 

 
     xml += "</Class>"; 
 
    } 
 
}); 
 

 
xml = xml + '</Classes></Root>'; 
 

 
console.log(xml); 
 
alert(xml); 
 
</script>