jQuery를이 XML

Question

에 HTML 테이블로 변환 나는 TR &의 TDS 수는

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

변경할 수 있습니다

나에게 다음과 같은 HTML을 제공하는 다음과 같은 jQuery 코드

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

와 원격 호스트에서 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> 

나는 첫 번째 열에 데이터로 날을 제공하는 다음과 같은 코드를 시도했다, 그러나 그것은 또한 하나의리스트에 두 테이블에서 모든 TDS 파일을 연결합니다.

 
$("#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 & 알버트 감사드립니다. 그들은 많은 도움을 주었고, 목표를 바꿀 수있어서 유감스럽게 생각했지만, 시나리오를 약간 수정할 수 있으면 도움이되었습니다.

첫 번째 TR에 헤더가 있고 두 개의 테이블이 있고 첫 번째 열이 이전과 같이 무시된다는 점을 제외하면이 HTML은 동일합니다.

 
<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 

해결책을 수정하려고 시도했지만 실패했습니다.

$("#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 1

, 당신은 루프 내부의 <schedule> 요소를 작성해야 <thead> 및 <tbody> 당신은 여전히 ​​약간 더 단순화 할 수 있습니다. 대신에 합치 문자열의

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.

사용 할 싶다면 내가 제대로 질문을 이해한다면

Answer 3

내가 XML로 변환이 방법으로 쉽게 HTML 테이블을 사용하여 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

을 만들 것입니다 : -

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