CODEWITHSUNDEEP
javascripthtmlcss
user3103991
user3103991

Reputation: 427

How to use CSS in html table inside javascript

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>

Upvotes: 0

Views: 4914

Answers (4)

G&#252;ven Altuntaş
G&#252;ven Altuntaş

Reputation: 253

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.

Upvotes: 0

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

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;

Upvotes: 0

Mehran Hatami
Mehran Hatami

Reputation: 12961

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;

Upvotes: 2

KellySmith
KellySmith

Reputation: 46

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
}

Upvotes: 0

Related Questions