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>
4 answers
solution1
2 ACCPTED 2014-01-02 22:12:57
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;
solution2
0 2014-01-02 22:06:23
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;
solution3
0 2014-01-02 22:09:02
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
}
solution4
0 2014-01-02 22:18:55
因为您正在使用函数document.write如果您创建一个元素并将其添加到您想要的地方，您将解决您的问题。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.