html - 选择行时突出显示表格单元格

Question

我想在单击特定行时突出显示表格单元格 (td) 而不是整行。

下面的代码以黄色突出显示一行。我想在选择该行时突出显示 Name 列。

$(function() {
    Thing = function(id, name, selected) {
        var self = this;
        self.ID = id, 
        self.Name = name, 
        self.isSelected = ko.computed(function() {
            return selected() === self;
        });
    };

    function viewModel() {
        var self = this;
        self.model = {};
        self.model.CurrentDisplayThing = ko.observable();
        self.model.Things = ko.observableArray(
            [
                new Thing(1, "Thing 1", self.model.CurrentDisplayThing),
                new Thing(2, "Thing 2", self.model.CurrentDisplayThing),
                new Thing(3, "Thing 3", self.model.CurrentDisplayThing)
            ]);
        self.selectThing = function(item) {
            self.model.CurrentDisplayThing(item);
        };
    }
    ko.applyBindings(new viewModel());
});

JS Fiddle Demo

Answer 1

只需将您的 css data-binding 移动到 td 级别而不是 tr 级别:

Demo JS Fiddle

您的旧代码:

<tr data-bind="click: $root.selectThing, css: { selected: isSelected } ">
    <td data-bind="text: ID"></td>
    <td data-bind="text: Name"></td>
</tr>

变成:

<tr data-bind="click: $root.selectThing ">
    <td data-bind="text: ID"></td>
    <td data-bind="text: Name, css: { selected: isSelected }"></td>
</tr>

还在下面的 Stack Snippet 中使用最新版本的 Knockout 运行，因此根据您的评论，这似乎不是版本控制问题。

$(function() {
    Thing = function(id, name, selected) {
        var self = this;
        self.ID = id, 
        self.Name = name, 
        self.isSelected = ko.computed(function() {
            return selected() === self;
        });
    };

    function viewModel() {
        var self = this;
        self.model = {};
        self.model.CurrentDisplayThing = ko.observable();
        self.model.Things = ko.observableArray(
            [
                new Thing(1, "Thing 1", self.model.CurrentDisplayThing),
                new Thing(2, "Thing 2", self.model.CurrentDisplayThing),
                new Thing(3, "Thing 3", self.model.CurrentDisplayThing)
            ]);
        self.selectThing = function(item) {
            self.model.CurrentDisplayThing(item);
        };
    }
    ko.applyBindings(new viewModel());
});

.selected { background-color: yellow; }
thead tr {
    border:1px solid black;
    background:lightgray;
}tbody tr {
    border:1px solid black;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="if:model.CurrentDisplayThing">
    Display: <span data-bind="text: model.CurrentDisplayThing().ID"></span>
</div>
<table class="defaultGrid">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: model.Things">
        <tr data-bind="click: $root.selectThing ">
            <td data-bind="text: ID"></td>
            <td data-bind="text: Name, css: { selected: isSelected}"></td>
        </tr>
    </tbody>
 </table>