Преобразование HTML-таблицы в XML

Я понимаю, что эта тема была рассмотрена раньше, но я считаю, что моя проблема немного сложнее. Я noob с JQuery, и после обдумывания этого некоторое время я приблизился к своему решению, но все же немного далеко.Преобразование HTML-таблицы в XML

Как и предыдущие сообщения, я пытаюсь преобразовать данные в таблицу HTML в XML, а затем заполнить текстовую область данными XML. Мне удалось получить большую часть моих данных, однако после моего Option Box у меня нет большого успеха.

Мой код ниже:

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta charset="utf-8" /> 
</head> 
<body> 
    <div id="load_get"> 
    <TABLE id=tblSample style="BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; VISIBILITY: visible" cellSpacing=0> 
     <THEAD style="FONT-SIZE: 15px"> 
      <TR> 
       <TH>#</TH> 
       <TH>Property<BR>#</TH> 
       <TH>Location</TH> 
       <TH>Status</TH> 
       <TH>Tag<BR>#</TH> 
       <TH>Pkg<BR>#</TH> 
       <TH>Description</TH> 
       <TH>Origin</TH> 
       <TH>Emp <br />Assigned</TH> 
       <TH style="COLOR: red">Action</TH> 
       <TH style="COLOR: red">Comment</TH> 
       <TH>Distributor <br />Contact #</TH> 
       <TH>Distributor <br /> Contact Name </TH> 
       <TH style="FONT-SIZE: 10px"></TH> 
      </TR> 
     </THEAD> 
     <TBODY> 
      <TR class=classy1> 
       <TD><INPUT id=prop_id_1 readOnly size=1 type=hidden value=prop_id_1 name=prop_id_1>1</TD> 
       <TD><INPUT id=property1_1 readOnly size=10 value=1429757></TD> 
       <TD><INPUT id=pro_location1_1 readOnly size=8 value="CENTRAL"></TD> 
       <TD><INPUT id=pro_status1_1 readOnly size=10 value=RECEIVED readonly></TD> 
       <TD><INPUT id=pro_tag1_1 style="WIDTH: 30px" readOnly value=1 readonly></TD> 
       <TD><INPUT id=package_num1_1 style="WIDTH: 30px" readOnly value=1></TD> 
       <TD><INPUT id=pro_description1_1 readOnly size=40 value="8FT 2X4 SOLID ALUMINUM BAR"></TD> 
       <TD><INPUT id=pro_origin1_1 readOnly size=3 value="FL"></TD> 
       <TD><INPUT id=pro_assigned1_1 readOnly size=5 value=33821></TD> 
       <TD><SELECT id=pro_action1_1><OPTION selected value=None></OPTION><OPTION value=A-Store>A-Store</OPTION><OPTION value=B-Sell>B-Sell</OPTION><OPTION value="C-Return to Vendor">C-Return to Vendor</OPTION><OPTION value="D-Scrap">D-Scrap</OPTION></SELECT></TD> 
       <TD><INPUT id=pro_comment1_1 size=15></TD> 
       <TD><INPUT id=contact1_1 size=10></TD> 
       <TD><INPUT id=contactname1_1 size=10></TD> 
       <TD></TD> 
      </TR> 
      <TR class=classy0> 
       <TD><INPUT id=prop_id_2 readOnly size=1 type=hidden value=prop_id_2 name=prop_id_2>2</TD> 
       <TD><INPUT id=property1_2 readOnly size=10 value=1422658></TD> 
       <TD><INPUT id=pro_location1_2 readOnly size=8 value="CENTRAL"></TD> 
       <TD><INPUT id=pro_status1_2 readOnly size=10 value=RECEIVED readonly></TD> 
       <TD><INPUT id=pro_tag1_2 style="WIDTH: 30px" readOnly value=2 readonly></TD> 
       <TD><INPUT id=package_num1_2 style="WIDTH: 30px" readOnly value=1></TD> 
       <TD><INPUT id=pro_description1_2 readOnly size=40 value='8FT 0.5IN DIA ALUMINUM RODS'></TD> 
       <TD><INPUT id=pro_origin1_2 readOnly size=3 value="FL"></TD> 
       <TD><INPUT id=pro_assigned1_2 readOnly size=5 value=33821></TD> 
       <TD><SELECT id=pro_action1_1><OPTION selected value=None></OPTION><OPTION value=A-Store>A-Store</OPTION><OPTION value=B-Sell>B-Sell</OPTION><OPTION value="C-Return to Vendor">C-Return to Vendor</OPTION><OPTION value="D-Scrap">D-Scrap</OPTION></SELECT></TD> 
       <TD><INPUT id=pro_comment1_2 size=15></TD> 
       <TD><INPUT id=contact1_2 size=10></TD> 
       <TD><INPUT id=contactname1_2 size=10></TD> 
       <TD></TD> 
      </TR> 
     </TBODY> 
    </TABLE> 
</div> 
<p>Click the button to activate the jquery function.</p> 

<button id="button1">Try it</button> 

<p id="demo"></p> 

<textarea id="xmlArea" rows="30" cols="60"></textarea> 


<script src="../Scripts/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
     $(function() { 
      $("#button1").click(function() { 
       var xml = '<?xml version="1.0" encoding="utf-8"?>\r\n'; 
       xml = xml + "<Root><Warehouse>\r\n"; 

       $("#tblSample tr").each(function() { 
        var cells = $("td", this); 
        if (cells.length > 0) { 
         xml += "<Item Name='" + $(this).closest('tr').find('input').eq(0).val() + "'>\r\n\t"; 

         for (var i = 1; i < cells.length; ++i) { 

          //Need to parse out selected item in dropdown box 
          if (i == 9) 
          { 
           xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $("select option:selected", cells.eq(i)).text() + '"/>\r\n\t'; 
          } 
          else 
          { 
           xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $(this).closest('tr').find('input').eq(i).val() + '"/>\r\n\t'; 
          } 
         } 

         xml += "</Item>\r\n"; 
        } 
       }); 

       xml = xml + '</Warehouse></Root>'; 
       //window.alert(xml); 
       //cells.eq(i)).text() 
       document.getElementById("xmlArea").value = xml; 
       //here you can rewrite the xmlstring to a new document 
       //or use the hidden control to store the xml text, call the text in code behind. 
       //also, you can call ajax to excuet codebehind and sava the xml file 

      }); 
     }) 

</script> 
</body> 
</html>

Я предполагаю, что у меня проблема рядом

xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $(this).closest('tr').find('input').eq(i).val() + '"/>\r\n\t';

потому, что его ищет следующее значение

Я также попытался

for (var i = 1; i < 10; ++i) { 
    //Need to parse out selected item in dropdown box 
    if (i == 9) { 
     xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $("select option:selected", cells.eq(i)).text() + '"/>\r\n\t'; 
    } 
    else { 
     xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $(this).closest('tr').find('input').eq(i).val() + '"/>\r\n\t'; 
    } 

} 
for (var i = 10; i < cells.length; ++i) { 
    //Need to parse out selected item in dropdown box 
    xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $(this).closest('tr').find('input').eq(i).val() + '"/>\r\n\t'; 
}

Я получаю

<?xml version="1.0" encoding="utf-8"?> 
<Root><Warehouse> 
    <Item Name='prop_id_1'> 
     <Data Title="Property#" Value="1429757"/> 
     <Data Title="Location" Value="CENTRAL"/> 
     <Data Title="Status" Value="RECEIVED"/> 
     <Data Title="Tag#" Value="1"/> 
     <Data Title="Pkg#" Value="1"/> 
     <Data Title="Description" Value="8FT 2X4 SOLID ALUMINUM BAR"/> 
     <Data Title="Origin" Value="FL"/> 
     <Data Title="Emp Assigned" Value="33821"/> 
     <Data Title="Action" Value="B-Sell"/> 
     <Data Title="Comment" Value="555-5555"/> 
     <Data Title="Distributor Contact #" Value="metal co"/> 
     <Data Title="Distributor Contact Name " Value="undefined"/> 
     <Data Title="" Value="undefined"/> 
</Item> 
<Item Name='prop_id_2'> 
     <Data Title="Property#" Value="1422658"/> 
     <Data Title="Location" Value="CENTRAL"/> 
     <Data Title="Status" Value="RECEIVED"/> 
     <Data Title="Tag#" Value="2"/> 
     <Data Title="Pkg#" Value="1"/> 
     <Data Title="Description" Value="8FT 0.5IN DIA ALUMINUM RODS"/> 
     <Data Title="Origin" Value="FL"/> 
     <Data Title="Emp Assigned" Value="33821"/> 
     <Data Title="Action" Value="A-Store"/> 
     <Data Title="Comment" Value="555-5555"/> 
     <Data Title="Distributor Contact #" Value="metalco"/> 
     <Data Title="Distributor Contact Name " Value="undefined"/> 
     <Data Title="" Value="undefined"/> 
</Item> 
</Warehouse></Root>

Как вы можете видеть, что комментарий содержит номер телефона, Контакт # содержит имя и контактное лицо не определено

источник

2016-01-19 Jonathan Nath

Я создал скрипку, чтобы лучше продемонстрировать: [ссылка на скрипку] (https://jsfiddle.net/JGirwarnath/fz8scgLd/) –

Это не источник проблемы, но вам нужно исправить дубликат «pro_action1_1» id. –

Это делает то, что вы хотите? https://jsfiddle.net/fz8scgLd/1/ –

Использование следующие. Изменения, которые я сделал на скрипку вы публикуемой являются:

Увеличения итераций для цикла, так что было бы пройти весь путь до последней ячейки
Изменено селектора, чтобы получить ребенок (INPUT) из `: nth-child` (TD)` this` (TR) вместо того, чтобы пытаться найти n-й вход. Необходимо использовать i + 1 в параметре nth-child как: nth-child - это массив на основе 1.
Убран второй цикл

if (cells.length > 0) { 
    xml += "<Item Name='" + $(this).closest('tr').find('input').eq(0).val() + "'>\r\n\t"; 

    for (var i = 1; i < 13; ++i) { 

     if (i == 9) { 
     xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text(); 
     xml += '" Value="' + $("select option:selected", cells.eq(i)).text() + '"/>\r\n\t'; 
     } else { 
     xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text(); 
     xml += '" Value="' + $(this + ":nth-child(" + (i + 1) + ")").children('input').val() + '"/>\r\n\t'; 
     } 
    } 
    xml += "</Item>\r\n"; 
    }

источник

2016-01-19 21:58:51

Преобразование HTML-таблицы в XML

ответ

Смежные вопросы