如何在javascript中的html表中使用CSS

Question

這是一個示例代碼，用於說明我如何在javascript中使用HTML標記。 我也希望將CSS樣式添加到表中，但它不能在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>

Answer 1

當你這樣做時：

document.write(strHtml);

它會清除頁面中的所有css和其他html標簽，這就是為什么代碼中沒有任何工作。 你可以這樣做：

var mydiv = document.createElement("div");
document.body.appendChild(mydiv);
mydiv.innerHTML = strHtml;

Answer 2

嘗試這個：

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

而不是這個：

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

你錯過了'

並在你的css中添加一個樣式后調用： gridtable

.gridtable{
   //your style
}

或者如果要使用現有類，請使用以下代碼：

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

嘗試使用以下方法更改document.write ：

var elemDiv = document.createElement('div');
document.body.appendChild(elemDiv);
mydiv.innerHTML = strHtml;

Answer 3

你似乎在這里有一個小的語法問題：

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

但是你正在為正確的表定義一個類。 將html插入到文檔中后，瀏覽器將像其他任何類型的HTML / CSS代碼一樣呈現它。

例：

.gridTable{
  // Style
}

Answer 4

因為您正在使用函數document.write如果您創建一個元素並將其添加到您想要的地方，您將解決您的問題。

如何在javascript中的html表中使用CSS

問題描述

4 個解決方案

解決方案1
2 已采納 2014-01-02 22:12:57

解決方案2
0 2014-01-02 22:06:23

解決方案3
0 2014-01-02 22:09:02

解決方案4
0 2014-01-02 22:18:55

如何在javascript中的html表中使用CSS

問題描述

4 個解決方案

解決方案1 2 已采納 2014-01-02 22:12:57

解決方案2 0 2014-01-02 22:06:23

解決方案3 0 2014-01-02 22:09:02

解決方案4 0 2014-01-02 22:18:55

解決方案1
2 已采納 2014-01-02 22:12:57

解決方案2
0 2014-01-02 22:06:23

解決方案3
0 2014-01-02 22:09:02

解決方案4
0 2014-01-02 22:18:55