cancel
Showing results for 
Search instead for 
Did you mean: 

Help with formatting javascript output using CSS

netreg
Grafter
Posts: 114
Registered: ‎24-08-2007

Help with formatting javascript output using CSS

Ok guys, newbie need some help here.
I got some code which reads in my xml file and builds a table in my html page. I hasten to add that i do not take credit for the code.
<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("documents/gradings.xml");
var x=xmlDoc.getElementsByTagName("STUDENT");
document.write("<table border='2'");
document.write("<thead>");
document.write("<tr><th>Name</th><th>Grade</th><th>Date</th></tr>");
document.write("</thead>");

for (var i=0;i<x.length;i++)
{
document.write("<tr>");
document.write("<td>");
document.write(x.getElementsByTagName("NAME")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x.getElementsByTagName("BELT")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x.getElementsByTagName("DATE")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>


What i want to do is format the text and table using styles defined in my CSS file.  Can anyone please shed light on how i do this.  I have included the css file in the html code, but just cant work out how  Huh 
6 REPLIES
Community Veteran
Posts: 14,469
Registered: ‎30-07-2007

Re: Help with formatting javascript output using CSS

You just use the css to alter how the table and related elements affect the data.
I suggest you start by just creating a static table with static data just using HTML code to experiment with using CSS then once you have the necessary HTML code, change the javascript to do the same.
Read up on how to use CSS in HTML with the id and class tag elements. There are plenty of free tutorials around on the web
Community Veteran
Posts: 1,576
Thanks: 3
Registered: ‎13-04-2007

Re: Help with formatting javascript output using CSS

You dont need to have any Javascript simply add a CCS to the xml and it will format it like html. So all you do is call the xml instead of html page.
You could format the xml as RSS feed as most browsers will format it very well.
Community Veteran
Posts: 14,469
Registered: ‎30-07-2007

Re: Help with formatting javascript output using CSS

I think you have gone way over his head with that reply.
Start with the simple things first.
netreg
Grafter
Posts: 114
Registered: ‎24-08-2007

Re: Help with formatting javascript output using CSS

Guys, thanks for the reply..  i think i might not have made myself clear  Undecided
I know how to use css when using static tables.  What I'm trying to achieve is a little more dynamic in the sense that the html page will build the table according to what is in the xml file.  The file basically contains some names that will be changing on a weekly basis so rather than keep editing the html, the idea is to simply amend the xml.  This therefore can be done by others in the club much easier than them having to do the html.
So what i am trying to ascertain is using the script, i also want to be able to format the text and table etc, using styles i have already defined my css file Smiley
Peter, i think i understand that you are saying to do it using tags, I will do some searches and see what i can find on that Cheesy
Community Veteran
Posts: 14,469
Registered: ‎30-07-2007

Re: Help with formatting javascript output using CSS

You can either alter the CSS to change what happens in a <table>, <TR> and <TD> tag or use an id/class element to alter the contents of say the <TD> tag.

<td id="black_small">Some text</td>
CSS
#black_small {
font-size: 8px;
color: black;
}
<table class="big_red">
<tr>
<td>Some text in big red</td>
</tr>
</table>
CSS
.big_red {
color: red;
font-size: 18px;
}

<table id="table1">
<tr>
<td>Some text in big red</td>
</tr>
</table>
CSS
#table1 {
padding: 0px;
margin: 0px
}
#table1 td {
color: red;
font-size: 18px;
}
Community Veteran
Posts: 1,576
Thanks: 3
Registered: ‎13-04-2007

Re: Help with formatting javascript output using CSS

As i said if you know ccs just format the xml file and it will display perfectly. Users dont have to do anything as the formating is in the CCS they cant touch its very simple