Highlight a table cell when selecting a row - html

Question

I want to highlight a table cell (td) instead of the entire row when a particular row is clicked.
This code below highlights a row in yellow. I would like to highlight the Name column when the row is selected instead.
$(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

Just move your css data-binding to the td level instead of the tr level:
Demo JS Fiddle
Your old code:
<tr data-bind="click: $root.selectThing, css: { selected: isSelected } ">
<td data-bind="text: ID"></td>
<td data-bind="text: Name"></td>
</tr>
Becomes:
<tr data-bind="click: $root.selectThing ">
<td data-bind="text: ID"></td>
<td data-bind="text: Name, css: { selected: isSelected }"></td>
</tr>
Also runs in Stack Snippet below with latest version of Knockout, so it doesn't appear to be a versioning issue based on your comment.
$(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

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

Answer 3

Try the following code, it works.
<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

Maybe the follwing code can help you:
$("table > thead > tr > th").css({"background":"#D3D3D3"});
$("table > thead > tr :nth-child("+($(this).index() + 1) +")").css({"background":"RED"});