Populate HTML Table with XML data using JavaScript and jQuery

Description:

In this example we explain that how to populate XML data in HTML Table using javascript in asp.net or Fill HTML Table with XML data using javascript in asp.net.

Here we demonstrate how to bind or populate XML data in HTML Table in client side like using javascript.previously we already explain that how to bind or populate gridview with XML data but here we bind the XML data in normal HTML table using javascript.

Here we first read the XML string from XML document and then bind or populate it with HTML Table using javascript or jQuery.

Below is the example that demonstrate how to populate XML data with HTML Table using javascript.

Code:-

<input type="button" id="btnGenerateXMLTable" value="Generate XML Table" />

<hr />

<div id="dvXMLTable">

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

    $(function () {

        $("# btnGenerateXMLTable ").click(function () {

            //Build an XML containing Customer records.

            var xml = "<Employees>";

            xml += "<Employee>";

            xml += "<EMPId>100</ EMPId ><EmpName>Raj pandey</EmpName><Country>UK</Country>";

            xml += "</ Employee >";

xml += "<Employee>";

            xml += "<EMPId>101</ EMPId ><EmpName>John Swans</EmpName><Country>USA</Country>";

            xml += "</ Employee >";

xml += "<Employee>";

            xml += "<EMPId>102</ EMPId ><EmpName>Priti Singh</EmpName><Country>India</Country>";

            xml += "</ Employee >";

xml += "</Employees>";

            var xmlDoc = $.parseXML(xml);

            var employees = $(xmlDoc).find("Employee");

            //Create a HTML Table element.

            var table = $("<table />");

            table[0].border = "1";

            //Add the header row.

            var row = $(table[0].insertRow(-1));

           employees.eq(0).children().each(function () {

                var headerCell = $("<th />");

                headerCell.html(this.nodeName);

                row.append(headerCell);

            });

            //Add the data rows.

            $(employees).each(function () {

                row = $(table[0].insertRow(-1));

                $(this).children().each(function () {

                    var cell = $("<td />");

                    cell.html($(this).text());

                    row.append(cell);

                });

            });

            var dvXMLTable = $("#dvXMLTable");

            dvXMLTable.html("");

            dvXMLTable.append(table);

        });

    });

</script>