使用 JavaScript 和 CSS 按类为 HTML 标签着色答案

【问题标题】：Coloring HTML tags by class with JavaScript and CSS使用 JavaScript 和 CSS 按类为 HTML 标签着色
【发布时间】：2013-07-02 21:06:52
【问题描述】：

我正在用表格单元格和 AngularJS 创建一个电子表格类型的程序，我想根据用户上传的文件为我的输入单元格着色。

我有一个数组，其中包含我遍历的所有用户数据，并且在与一些正则表达式匹配之前，一些数据被推入“红色数组”和“蓝色数组”。然后，当将原始数组的信息放入电子表格时，我将调用一个函数。此函数检查放置的信息是在红色数组还是蓝色数组中，然后将输入框着色为红色或蓝色（如果未找到匹配则为绿色。）这个着色函数应该返回一个字符串，它可以用作输入标签的 id 或类，在 CSS 中，它根据这个返回的名称为标签着色。

但是，我似乎无法弄清楚为输入标签着色的正确方法。我的输入框保持默认的白色。

<script>
...

var blue = ["blue1","blue2","blue3"];
var red = ["red1","red2","red3"];
var allData = [["red1","misc1","misc2"],["blue1","blue2","blue3"],["red2","red3","misc3"]];

var makeColors = function(data){
    if( data in red){
        return "red";
    }
    else if( data in blue){
        return "blue";
    }
    else{
        return "green";
    }
};

//creates the spreadsheet       
sheet= function($scope, $parse){
$scope.columns = ["col1","col2","col3"]
$scope.rows = allData.length;
$scope.cells = {};
$scope.values = allData;
};
</script>

<div ng-app ng-controller="sheet">
    <center><table>
        <tr class="column-label">
            <td ng-repeat="column in columns">{{column}}</td>
        <tr ng-repeat="value in values">
            <td class="row-label" ng-repeat="data in value">
                <div id="{{data}}">
                    <input type="text" value="{{data}}" class="makeColors({{data}})">
                </div>
            </td>
        </tr>
    </table></center>
</div>

<style>

input{
    font-size: 10pt;
    position: absolute;
    height: 1.2em;
    height: 14pt;
    overflow: hidden;
    padding-left: 4pt;
    border: none;
    width: 80px;
}

table{
    border-collapse: collapse;
}
td > div {
    height:16pt;
    width:2px;
}
td {
    border: 1px solid #0EE;
    width:85px;

}
.column-label >td, .row-label{
    text-align:center;
    background: #EEE;
}
.row-label {
    width: 2em;
}
input.red{
    background-color: red;
}
input.blue{
    background-color: blue;
}
input.green{
    background-color: green;
}

</style>

【问题讨论】：

标签： javascript html css

【解决方案1】：

你的问题出在这一行：

class="makeColors({{data}})"

你不能那样做。这是一个我正在使用 map() 解决它的小提琴：http://jsfiddle.net/W5aED/

为了进一步解释这个问题，{{ }} 之外的代码不是由 Angular 执行的（我的意思是 makeColors( 部分），即使它不是执行 javascript 函数的正确方法。

【讨论】：

这正是我所需要的！非常感谢。