NEWS: Total Picture Views: 147065 | Total Article Views: 155627 | Top 5 Most Popular Article: 1. Am I Stuck Algorithm with Becker Robot | 2. How to read a JSON and work with it | 3. PickUpThings with Becker Robot | 4. Encrypted Data GUI (Download .Zip) | 5. Create Wall and Things with Becker

Display XML information into a Table 2 Javascript

Description:

In this example I will show you how to display a xml structure information into a table in Javascript.

Code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>In-Class Exercise 2</title>

    <script type="text/javascript">
        function readXML() {
            var xml = document.getElementById("myXML");
            var emp = xml.getElementsByTagName("Employee");


            document.write('<table border="1">');
            document.write("<tr><th>Employee ID</th><th>Employee First Name</th><th>Employee Last Name</th><th>Employee DOB</th><th>Employee Department</th></tr>")
            for (var i = 0; i <= emp.length; i++) {
                var id = emp[i].getElementsByTagName("Emp_Id")[0].firstChild.data;

                var fname = emp[i].getElementsByTagName("Emp_Name")[0].getElementsByTagName("First")[0].firstChild.data;
                var lname = emp[i].getElementsByTagName("Emp_Name")[0].getElementsByTagName("Last")[0].firstChild.data;

                var month = emp[i].getElementsByTagName("Emp_DOB")[0].getElementsByTagName("Month")[0].firstChild.data;
                var day = emp[i].getElementsByTagName("Emp_DOB")[0].getElementsByTagName("Day")[0].firstChild.data;
                var year = emp[i].getElementsByTagName("Emp_DOB")[0].getElementsByTagName("Year")[0].firstChild.data;

                var dept = emp[i].getElementsByTagName("Emp_Dept")[0].firstChild.data;

                document.write("<tr><td>" + id + "</td>");
                document.write("<td>" + fname + "</td>");
                document.write("<td>" + lname + "</td>");
                document.write("<td>" + day + "/" + month + "/" + year + "</td>");
                document.write("<td>" + dept + "</td>");
                document.write("</tr>");
            }
            document.write("</table>");
        }
    </script>
</head>
<body>



    <xml id="myXML" style="display:none">
        <Company>
            <Employee>
                <Emp_Id>ID-101</Emp_Id>
                <Emp_Name>
                    <First>Chrish</First>
                    <Last>Harish</Last>
                </Emp_Name>
                <Emp_DOB>
                    <Month>02</Month>
                    <Day>12</Day>
                    <Year>1980</Year>
                </Emp_DOB>
                <Emp_Dept>Computer</Emp_Dept>
            </Employee>

            <Employee>
                <Emp_Id>ID-102</Emp_Id>
                <Emp_Name>
                    <First>Robin</First>
                    <Last>Smith</Last>
                </Emp_Name>
                <Emp_DOB>
                    <Month>10</Month>
                    <Day>18</Day>
                    <Year>1984</Year>
                </Emp_DOB>
                <Emp_Dept>Business</Emp_Dept>
            </Employee>

            <Employee>
                <Emp_Id>ID-103</Emp_Id>
                <Emp_Name>
                    <First>Jessica</First>
                    <Last>Hudson</Last>
                </Emp_Name>
                <Emp_DOB>
                    <Month>05</Month>
                    <Day>17</Day>
                    <Year>1974</Year>
                </Emp_DOB>
                <Emp_Dept>Human resource</Emp_Dept>
            </Employee>

        </Company>
    </xml>

    <button onclick="readXML();">Click on me!</button>
</body>
</html>
Attachments: None

Tags: Table XML

Total Views: 840

My name is Jean-Mathieu

I created this website so other people could enjoy finding useful stuff easier. If you have any question do not hesitate to contact me.

jean8mathieuCreated on 02/23/15


affiliate_link

Disclosure: We are a website that needs compensation to operate like any other website on the internet.
We may receive consideration for our reviews but we are totally unbiased and do not accept paid reviews or fake reviews claiming to be something they are not.