Question

我有一个表组件，不能在内部进行更改，但是我需要读取DOM元素并在特定的红色列中显示负值。所以说我有一张这样的桌子：

<table id="mytable">
    <tr>
        <td>
            Person 1
        </td>
        <td>
            Address 1
        </td>
        <td>
            -2435
        </td>
    </tr>
    <tr>
        <td>
            Person 2
        </td>
        <td>
            Address 2
        </td>
        <td>
            432
        </td>
    </tr>
</table>

读取表格元素并对人1的金额负值进行着色的最佳方法是什么？

Answer 1

我假设您想用Javascript来做；这是一个片段：

document.querySelectorAll('#mytable td').forEach(function(e) {
    if (!isNaN(e.innerText)) {
       e.style.color = 'red';
    }
});

http://jsfiddle.net/6dqkeo9L/

Answer 2

嗯，您是从$http还是从JavaScript $scope对象获取数据到表中？如果是这样，您可以使用简单的ng-class HTML：

<table id="mytable">
        <tr ng-repeat="data in data">
            <td>
               {{data.person}}
            </td>
            <td>
                {{data.adres}}
            </td>
            <td ng-class="{negative: data.number < 0}">
                 {{data.number}}
            </td>
        </tr>
    </table>

您的数据：

 $scope.data = [{
   "person" : "person 1",
   "adress" : "Adress 1",
   "number": 2432
 },{
   "person" : "person 2",
   "adress" : "Adress 2",
   "number": -123
 }]

样式：

.negative {
    color: red;
}

朋克：http://plnkr.co/edit/MZlUk7LsfYlNQtsC8xea?p=preview

为表列的所有值着色文本

2 个答案: