只在表中突出显示一个单元格值
Make only a cell value highlighted in table
我使用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]">
然后它就起作用了。
编辑:删除了我以前的回答
相关文章:
- 在 SlickGrid 中编辑后,根据不同列中的另一个单元格清除单元格
- 申请表要求在提交前一个单元格与其他单元格相等
- 每行仅突出显示一个单元格
- Google Apps 脚本,用于根据一个单元格的值对另一个单元格进行条件颜色格式设置
- 只在表中突出显示一个单元格值
- 当一个单元格被编辑时,是否有一个事件触发,但值没有'不要改变
- 我希望joint.js库读取我的JSON并将其显示为一个单元格:rect和circle
- 用JQuery在廉价的excel表格上标记最后一个单元格
- 在 jQuery 中获取表的上一个或下一个单元格值
- 获取上一个单元格的图像
- 如何将类添加到由摘要功能生成的网格的一个单元格
- 使用查询选择器查找同级行中包含的下一个单元格
- 当按 Tab 键经过最后一个单元格时,自动在 ng-grid 中添加行
- 数组最后一个单元格中不需要的对象
- 在 jqxGrid 中按一个单元格的值选择一行
- 如何在访问子网格视图时获取父网格视图的一个单元格的值
- 为其中一个单元格或 td 查找 colSpan 标头是 Spans
- 将多个具有相同名称的文本输入插入到 MySql 中的一个单元格中
- 如何使用来自另一个单元格的 onChange 事件更新一个单元格
- 下一个单元格上可自动点击的电子邮件地址.应用程序脚本