使用JavaScript或JQuery将HTML表转换为XML

时间:2014-01-24 22:44:36

标签: jquery xml

我有这个动态创建的HTML表,我希望将其转换为XML(参见下面的xml输出)

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

这是我正在处理的功能,我需要一些帮助来解析下拉框所选项目

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

$("#<%=Me.GridView1.ClientID %> 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) {
             xml += '<Data year="' + $("#GridView1").find("th").eq(i).text()  + '" status="' + $("option:selected",cells.eq(i)).text() + '"/>';
        }

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

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

这就是我希望解析后XML输出的样子。

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

上面的jquery函数现在可以正常工作了。如果有人能想出很好的JavaScript示例,我将非常感激。

由于

1 个答案:

答案 0 :(得分:1)

for循环

中尝试此操作
xml += '<Data year="' + $("#GridView1").find("th").eq(i).text()  + '" status="' + $("option[selected]",cells.eq(i)).text() + '"/>';

DEMO