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

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>

Answer 2

试试这个：

<强> CSS

    tbody tr.selected > td:last-child{
       background-color: yellow;
    }

<强> JSFIDDLE

Answer 3

尝试以下代码，它有效。

<table id="tableID" border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody >
        <tr >
            <td >1</td>
            <td >2</td>
        </tr>
    </tbody>
 </table>

JavaScript的：

var table = document.getElementById("tableID");
if (table != null) {
    for (var i = 0; i < table.rows.length; i++) {
        for (var j = 0; j < table.rows[i].cells.length; j++)
        table.rows[i].cells[j].onclick = function () {
            this.style.backgroundColor = "yellow";  
        };
    }
}

Answer 4

也许以下代码可以帮助您：

$("table > thead > tr > th").css({"background":"#D3D3D3"});
$("table > thead > tr :nth-child("+($(this).index() + 1) +")").css({"background":"RED"});