Question

下面是我的html代码。如果我们得到，可以更改列背景颜色该列中的绿色值。所以想要绿色背景柱意味着我们希望根据颜色名称更改列背景颜色。数据将通过网络服务显示。

在html代码下面写html代码以显示数据

<html>
    <head>
    </head>
    <body>
        <table>
            <tr>
                <th>Risk Category</th>
            </tr>
            <tr>
                <td colspan="1"></td>
            </tr>
        </table>
    </body>
</html>

Answer 1

使用td上的样式内联属性，如下所示。

<td style="background-color:COLOR_NAME_OR_HASH_FROM_SERVER"></td>

Answer 2

由于您可能会返回不一定具有可解释颜色（琥珀色）的颜色，因此您可能需要编写一些简单的CSS。我只是把它放在class中，但你可以把它移到一个外部的CSS文件中，特别是如果有多种颜色的话。

但是如果你可以编辑标记，只需将服务器给出的颜色添加为该单元格的<html> <head> <style> .Amber { background: #ffbf00; } .Green { background: #008000; } .Red { background: #f00; } </style> </head> <body> <table> <tr> <th>Risk Category</th> </tr> <tr> <td class="Amber" colspan="1">Amber</td> </tr> </table> </body> </html>。

var cells = document.querySelectorAll('td');

for( i = 0; i < cells.length; i++ ){
  text = cells[i].innerText || cells[i].textContent;
  cells[i].className = text;
}

如果由于某种原因无法编辑标记，则需要使用JavaScript循环遍历表格单元格并以此方式添加类。这样的事情应该让你开始：

var cells = document.querySelectorAll('td');

for( i = 0; i < cells.length; i++ ){
  text = cells[i].innerText || cells[i].textContent;
  cells[i].className = text;
}

并且要将它们全部结合起来，这里有一个片段，展示了如何根据从服务器中提取的单词添加带有JS的类。

.Amber { background: #ffbf00; }
.Green { background: #008000; }
.Red { background: #f00; }

<html>
    <head>
    </head>
    <body>
        <table>
            <tr>
                <th>Risk Category</th>
            </tr>
            <tr>
                <td colspan="1">Amber</td>
            </tr>
            <tr>
                <td colspan="1">Green</td>
            </tr>
            <tr>
                <td colspan="1">Red</td>
            </tr>
        </table>
    </body>
</html>

CREATE TABLE IF NOT EXISTS `your table` (
   `id` int(11) NOT NULL AUTO_INCREMENT,

根据html中的颜色名称更改列背景颜色

2 个答案: