Jump to content
tinfanide

CSS does not work with JS only on <th>

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...