Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for
Help with formatting javascript output using CSS
Topic Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Plusnet Community
- :
- Forum
- :
- Other forums
- :
- Tech Help - Software/Hardware etc
- :
- Re: Help with formatting javascript output using C...
Help with formatting javascript output using CSS
11-03-2008 9:04 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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
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
6 REPLIES 6
Re: Help with formatting javascript output using CSS
11-03-2008 10:09 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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
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
Re: Help with formatting javascript output using CSS
11-03-2008 11:19 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
You could format the xml as RSS feed as most browsers will format it very well.
Re: Help with formatting javascript output using CSS
11-03-2008 11:21 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
I think you have gone way over his head with that reply.
Start with the simple things first.
Start with the simple things first.
Re: Help with formatting javascript output using CSS
12-03-2008 8:32 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
Guys, thanks for the reply.. i think i might not have made myself clear
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
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
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
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
Re: Help with formatting javascript output using CSS
12-03-2008 4:18 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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;
}
Re: Help with formatting javascript output using CSS
12-03-2008 11:46 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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
Topic Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Plusnet Community
- :
- Forum
- :
- Other forums
- :
- Tech Help - Software/Hardware etc
- :
- Re: Help with formatting javascript output using C...