如何在javascript中的html表中使用CSS
[英]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. 
这是一个示例代码，用于说明我如何在javascript中使用HTML标记。 I want to add CSS style to the table also, but its not working inside of the javascript code. 我也希望将CSS样式添加到表中，但它不能在javascript代码中使用。 Could anyone please suggest how to add CSS style to my html table inside of the javascript. 任何人都可以建议如何将CSS样式添加到我的html桌面的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 个解决方案
解决方案1
2 已采纳 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. 它会清除页面中的所有css和其他html标签，这就是为什么代码中没有任何工作。 you can do this instead: 你可以这样做：
var mydiv = document.createElement("div");
document.body.appendChild(mydiv);
mydiv.innerHTML = strHtml;
解决方案2
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 并在你的css中添加一个样式后调用： 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: 尝试使用以下方法更改document.write ：
var elemDiv = document.createElement('div');
document.body.appendChild(elemDiv);
mydiv.innerHTML = strHtml;
解决方案3
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. 将html插入到文档中后，浏览器将像其他任何类型的HTML / CSS代码一样呈现它。
Example: 例：
.gridTable{
// Style
}
解决方案4
0 2014-01-02 22:18:55
因为您正在使用函数document.write如果您创建一个元素并将其添加到您想要的地方，您将解决您的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.