Question

我正在使用以下jQuery代码从远程主机检索HTML

    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＆amp; TD可以更改，我想检索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>

我尝试了以下代码，它为我提供了第一列数据，但它也将两个表中的所有TD连接成一个列表。

$("#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＆amp;艾伯特对你的回答。他们帮助了很多，抱歉改变了目标，但是如果我可以稍微修改一下这个场景。

这是相同的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，需要抓取Header（TH）并在TD循环中使用它来设置name属性，就像这样。

<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

试试这个：

$(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 2

如果我正确理解您的问题，您需要在循环中创建<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 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： -

＆＃13;

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

＆＃13;

jQuery将HTML表转换为XML

4 个答案: