current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

This a sample code to show how i am using HTML tags inside of the javascript. I want to add CSS style to the table also, but its not working inside of the javascript code. Could anyone please suggest how to add CSS style to my html table inside of the javascript.

<html>
    <body>
        <style type="text/css">
            table.imagetable 
            {
                font-family: verdana,arial,sans-serif;
                font-size:11px;
                color:#333333;
                border-width: 1px;
                border-color: #999999;
                border-collapse: collapse;
            }
            table.imagetable th 
            {
                background:#b5cfd2 url('cell-blue.jpg');
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #999999;
            }
            table.imagetable td 
            {
                background:#dcddc0 url('cell-grey.jpg');
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #999999;
            }
        </style>
<script language="JavaScript" >
            function getSubmit()
            {

                var strHtml ="";
                strHtml += "<table class = 'imagetable' >";
                strHtml += "<tr>";
                strHtml += "<th>S No</th>";
                strHtml += "<th>Roll Number</th>";
                strHtml += "<th>Name</th>";
                strHtml += "<th>Maths</th>";
                strHtml += "<th>Physics</th>";
                strHtml += "<th>Chemistry</th>";
                strHtml += "<th>Total</th>";
                strHtml += "<th>Percentage</th>";
                strHtml += "<th>Division</th>"
                strHtml += "</tr>"
                strHtml += "</table>";
                document.write(strHtml);
            }
        </script>
        <div align="center" style="border-bottom-color:#330000">
            <table border="1" bordercolor="#000000" class= "imagetable">
                <th>S No</th>
                <tr align="center">
                    <td><input name="button" type="button" onClick="getSubmit()" value="submit"/></td>
                </tr>
            </table>
        </div>
    </body>
</html>
share|improve this question
    
Just write classes? –  Sterling Archer Jan 2 at 22:07
    
The CSS (which should really be in the <head>) refers to table.imagetable but your code is writing a table with a class of gridtable –  Mike W Jan 2 at 22:07
    
you can fix your code using my answer, none of your css rules won't work until you keep them instead of removing them. –  Mehran Hatami Jan 2 at 22:22
    
Thanks Mehran, the changes you suggested worked. Happy New year. :) –  user3103991 Jan 2 at 22:27

4 Answers 4

up vote 2 down vote accepted

when you do:

document.write(strHtml);

it clears all the css and the other html tags you have in the page, that's why nothing is working in your code. you can do this instead:

var mydiv = document.createElement("div");
document.body.appendChild(mydiv);
mydiv.innerHTML = strHtml;
share|improve this answer
    
Thanks Mehran, the changes you suggested worked. Happy New year. :) –  user3103991 Jan 2 at 22:25
up vote 0 down vote

because you are using in a function document.write if you create an element and apend it where you want u will fix your problem.

share|improve this answer
up vote 0 down vote

try this:

strHtml += "<table class = 'gridtable' >";

instead of this:

strHtml += "<table class = gridtable' >";

you are missing '

And after add a style into your css called: gridtable

.gridtable{
   //your style
}

or if you want to use the existing class use this code:

strHtml += "<table class = 'imagetable' >";

try to change document.write with this:

var elemDiv = document.createElement('div');
document.body.appendChild(elemDiv);
mydiv.innerHTML = strHtml;
share|improve this answer
    
I am so sorry, actually it was a typo here.. i corrected the code and its also not wokrking. –  user3103991 Jan 2 at 22:11
    
update answer try now please @user3103991 –  Alessandro Minoccheri Jan 2 at 22:16
up vote 0 down vote

You seem to have a small syntax problem here:

strHtml += "<table class = gridtable' >"

But you are on the right track with defining a class for the table. Once the html has been inserted into the document, the browser will go about rendering it just like any other type of HTML/CSS code.

Example:

.gridTable{
  // Style
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.