只在表中突出显示一个单元格值

Make only a cell value highlighted in table

本文关键字:一个 单元格 显示      更新时间:2023-09-26

我使用angularjs,当更新表中的某个值时,我想只向该特定单元格添加一个CSS类。

  • 如何只添加高亮显示类也只添加那个单元格?而不是整排。。。使用角度指令

预期行为:由于Value2已更新,因此只应突出显示该单元格。

我的傻瓜:http://plnkr.co/edit/mfglNOpluccUKLTlLdja?p=preview

我的桌子:

<table border="1" style="width: 320px;" class="table table-striped table-hover table-responsive table-bordered">
  <thead style="font-weight: bold;">
    <tr>
      <th ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td ng-repeat="column in columnsTest" ng-if="column.checked">
        <span class="glyphicon glyphicon-circle-arrow-right" ng-show="column.id === 'Value1'"></span>
        <span data-highlighter="row.Updated">{{row[column.id]}}</span>
      </td>
    </tr>
  </tbody>
</table>

css:

.highlight {
background-color: lightgreen;
transition: background 200ms;
}

角度方向:

app.directive('highlighter', ['$timeout', function ($timeout) {
return {
    restrict: 'A',
    scope: {
        model: '=highlighter'
    },
    link: function (scope, element) {
        scope.$watch('model', function(updated) {
                if (updated) {

                element.addClass('highlight');
                // auto remove after some delay
                $timeout(function () {
                    element.removeClass('highlight');
                }, 1000);
                }
        });
    }
};

这部分是问题所在:

model: '=highlighter'

因为

<span data-highlighter="row.Updated">

这将为model提供row.Updated的值,这是一个在所有三列上都会发生变化的值,因为它是在它们的父列上定义的。

将其更改为

<span data-highlighter="row[column.id]">

然后它就起作用了。


编辑:删除了我以前的回答