How to use CSS in html table inside javascript

Question

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>

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 — user1864610
– user1864610, Commented Jan 2, 2014 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
– Mehran Hatami, Commented Jan 2, 2014 at 22:22
Thanks Mehran, the changes you suggested worked. Happy New year. :) — user3103991
– user3103991, Commented Jan 2, 2014 at 22:27

Mehran Hatami · Accepted Answer · 2014-01-02 22:12:57Z

2

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;

answered Jan 2, 2014 at 22:12

Mehran Hatami

13k6 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3103991 Over a year ago

Thanks Mehran, the changes you suggested worked. Happy New year. :)

KellySmith · Accepted Answer · 2014-01-02 22:09:02Z

0

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
}

answered Jan 2, 2014 at 22:09

KellySmith

462 bronze badges

Comments

Alessandro Minoccheri · Accepted Answer · 2014-01-02 22:16:17Z

0

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;

edited Jan 2, 2014 at 22:16

answered Jan 2, 2014 at 22:06

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

1 Comment

user3103991 Over a year ago

I am so sorry, actually it was a typo here.. i corrected the code and its also not wokrking.

mdml · Accepted Answer · 2014-01-02 22:37:42Z

0

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.

edited Jan 2, 2014 at 22:37

mdml

23k8 gold badges61 silver badges66 bronze badges

answered Jan 2, 2014 at 22:18

Güven Altuntaş

2531 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to use CSS in html table inside javascript

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related