tinfanide Posted November 9, 2016 Share Posted November 9, 2016 xmlDoc = xml.responseXML; table = document.createElement("table"); Employees = xmlDoc.getElementsByTagName("Employee"); for (x=0; x<Employees.length+1; x++) { if (x==0) { tr = table.insertRow(-1); // does not work tr.className = "header"; tr.setAttribute("class","header"); for (z=0; z<5; z++) { th = tr.insertCell(z); th.innerHTML = headers[z]; } } else { tr = table.insertRow(-1); Employee = Employees[x-1].getElementsByTagName("*"); for (y=0; y<Employee.length; y++) { td = tr.insertCell(y); td.innerHTML = Employee[y].textContent; } } if ((x-0)%2 == 0) { if (tr.className != "header") {tr.className = "even";} } } document.body.appendChild(table); The red-highlighted codes don't work but the HTML codes work. It seems my external CSS sheet does not work with the javascript, but HTML. The whole site is here for reference (just for testing): http://lifelearning.xtreemhost.com/_json_xml_parsing/get_json_xml.html?i=1 <table> <tr class="header"><th>Header ONE</th><th>Header TWO</th></tr> <tr><td>Cell 1</td><td>Cell 2</td></tr> <tr class="even"><td>Cell 1</td><td>Cell 2</td></tr> <tr><td>Cell 1</td><td>Cell 2</td></tr> <tr class="even"><td>Cell 1</td><td>Cell 2</td></tr> </table> Here's the CSS codes: table, th, td { width: 800px; border: 1px solid black; } table td { font-size: 16px; } tr.header { font-size: 36px; } tr.even { background-color: #dddddd; } Link to comment Share on other sites More sharing options...
dsonesuk Posted November 9, 2016 Share Posted November 9, 2016 That links show original code where you created th as row and td as coloumns. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 9, 2016 Share Posted November 9, 2016 This is what should be happening, compared to what is happening <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <style type="text/css"> table, #test01, #test02 {width: 800px; margin: 20px auto;} table, td, th {border: 1px solid black;} table td { font-size: 16px; } tr.header { font-size: 36px; } tr.even { background-color: #dddddd; } h3 {text-align: center;} </style> </head> <body> <script type="text/javascript"> var StaffList = '{ "Staff" : [' + ' {"Staff":"John Doe", "Gender":"Male"},' + ' {"Staff":"Anna Smith", "Gender":"Female"},' + ' {"Staff":"Peter Jones", "Gender":"Male"}]}'; //TABLE Correct Staff = JSON.parse(StaffList); var header = document.createElement("h3"); var t = document.createTextNode("Correct Table Header Layout"); header.setAttribute("class", "header"); header.appendChild(t); document.body.appendChild(header); //Correct layout table var table = document.createElement("table"); document.body.appendChild(table); obj = Staff.Staff[0]; //create tr row element to hold th elements var header_row = document.createElement("tr"); //add class header_row.className = "header"; //loop through creating th elements for (var y in obj) { var column = document.createElement("th"); var data = document.createTextNode(y); //append data headers to th element column.appendChild(data); //append th elements to tr element header_row.appendChild(column); //append th element to table table.appendChild(header_row); } //loop through creating tr elelemts for td elements for (var x = 0; x < Staff.Staff.length; x++) { obj = Staff.Staff[x]; //create tr row element to hold td elements var row = document.createElement("tr"); //every even row add class if (x % 2 === 0) row.setAttribute("class", "even"); for (var y in obj) { //loop creating td element var column = document.createElement("td"); //create text for td from json array var data = document.createTextNode(obj[y]); //append text to td element column.appendChild(data); //append td to tr element row.appendChild(column); //append tr row to table table.appendChild(row); } } var itm = document.getElementsByTagName("table")[0]; var addDiv = document.createElement("div"); addDiv.id = "test01"; document.body.appendChild(addDiv); var cln = itm.cloneNode(true).outerHTML; cln = cln.replace(/\</g, "<"); //for < cln = cln.replace(/\>/g, ">"); //for > cln = cln.replace(/<table>/g, "<table><br>"); cln = cln.replace(/<\/tr>/g, "<\/tr><br>"); //for > document.getElementById(addDiv.id).innerHTML = cln; ///TABLE incorrect header = document.createElement("h3"); t = document.createTextNode("INCORRECT Table Header Layout"); header.appendChild(t); document.body.appendChild(header); var table = document.createElement("table"); document.body.appendChild(table); obj = Staff.Staff[0]; var header_row = document.createElement("th"); for (var y in obj) { var column = document.createElement("td"); var data = document.createTextNode(y); column.appendChild(data); header_row.appendChild(column); table.appendChild(header_row); } for (var x = 0; x < Staff.Staff.length; x++) { obj = Staff.Staff[x]; var row = document.createElement("tr"); if (x % 2 === 0) row.setAttribute("class", "even"); for (var y in obj) { var column = document.createElement("td"); var data = document.createTextNode(obj[y]); column.appendChild(data); row.appendChild(column); table.appendChild(row); } } var itm = document.getElementsByTagName("table")[1]; var addDiv = document.createElement("div"); addDiv.id = "test02"; document.body.appendChild(addDiv); var cln = itm.cloneNode(true).outerHTML; cln = cln.replace(/\</g, "<"); //for < cln = cln.replace(/\>/g, ">"); //for > cln = cln.replace(/<table>/g, "<table><br>"); cln = cln.replace(/<\/tr>/g, "<\/tr><br>"); //for > cln = cln.replace(/<\/th>/g, "<\/th><br>"); //for > document.getElementById(addDiv.id).innerHTML = cln; </script> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now