CSS does not work with JS only on <th>

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

dsonesuk · November 9, 2016

That links show original code where you created th as row and td as coloumns.

dsonesuk · 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>

Sign In

CSS does not work with JS only on <th>

Recommended Posts

tinfanide

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity