Convert HTML table into XML

Question

I realize this topic has been covered before but I find my issue slightly more complex. I'm a noob with JQuery and after mulling with this for a while I have come close to my solution, but still a little far.

Like previous posts I am trying to convert data in an HTML table into XML and then populate a textarea with the XML Data. I have been successful in getting most of my data, however after my Option Box, I don't have much success.

Similar Posts: Convert HTML table into XML using JavaScript or JQuery
jQuery convert HTML Table to XML

My code is below:

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

I assume that I'm having an issue near

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

because its looking for the next value

I have also tried

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';
}

I am getting

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

As you can see the Comment contains a phone number, Contact # contains a name, and Contact Name is undefined

I have created a fiddle to better demonstrate: link to fiddle — Jonathan Nath
– Jonathan Nath, Commented Jan 19, 2016 at 19:51
This is not the source of the problem, but you need to fix the duplicate "pro_action1_1" id. — Tony Hinkle
– Tony Hinkle, Commented Jan 19, 2016 at 20:57
Yes @TonyHinkle that exactly what I needed! Thanks for using my original one. That was my first fiddle on StackOverflow and I'm glad to see that it worked out quite well. — Jonathan Nath
– Jonathan Nath, Commented Jan 20, 2016 at 12:47

Tony Hinkle · Accepted Answer · 2016-01-19 22:04:31Z

Use the following. The changes I made to the fiddle you posted are:

Increased the iterations of the for loop so that it would get all the way to the last cell
Changed the selector to get the child (INPUT) of the `:nth-child` (TD) of `this` (TR), instead of trying to find the nth input. Need to use i + 1 in the nth-child parameter as :nth-child is a 1-based array.
Removed the second FOR loop

  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";
  }

Collectives™ on Stack Overflow

Convert HTML table into XML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related