How to capture table row on button click to add css class knockout js - css

Question

i have table with data and data populated by knockout js foreach bind.
i would like to know how to access specific table row's data when it gets updated.
if i could access table row then could add css class to that tr. my objective is to do bit color animation for a row which will be updated just clicking on button. when any data will be push to table row clicking on "Update Data" button then i want to add a class to that table row and after few minute remove that class too. hence i am new so no logic is coming to my mind to achieve this....any help would be appreciated. thanks
jsfiddle http://jsfiddle.net/62Ls6x9n/157/
full code
<button data-bind="click: AddNewData">Add New Data</button>
<button data-bind="click: UpdateDataByIds">Update Data</button>
<br><br>
<table class="imagetable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Status</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody data-bind="foreach: Stocks">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: name"></td>
<td data-bind="text: price"></td>
<td data-bind="text: status"></td>
<td>edit</td>
<td>delete</td>
</tr>
</tbody>
</table>
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
var StockItem = function(_id, _name, _price, _status){
var self = this;
self.id = ko.observable(_id);
self.name = ko.observable(_name);
self.price = ko.observable(_price);
self.status = ko.observable(_status);
};
var data= [
new StockItem("12345", "Acme Widget 1", "£25.99", "In Stock"),
new StockItem("67890", "Acme Widget 2", "£28.99", "In Stock"), new StockItem("11123","Acme Widget 3","£15.99", "In Stock"),
new StockItem("14156", "Acme Widget 4", "£33.99", "In Stock")
];
var NewData = [new StockItem("99999", "HSL Limited", "£78.99", "In Stock")];
var appViewModel = function()
{
var self = this;
self.Stocks = ko.observableArray(data);
self.AddNewData = function(){
self.Stocks.push.apply(self.Stocks,NewData);
};
self.DeleteItem = function(dataContext){
var itemToDelete = dataContext;
self.Stocks.remove(itemToDelete);
}
self.UpdateDataByIds = function(){
var id1 = '11123';
var id2 = '12345';
self.UpdateById(id1,null,null,"Out of Stock");
self.UpdateById(id2,null,"31.45",null);
};
self.UpdateById = function(_id, _name, _price, _status){
var matchedItem = ko.utils.arrayFirst(self.Stocks(), function(item) {
return item.id() === _id;
});
if (matchedItem != null){
if (_name != null) matchedItem.name(_name);
if (_price != null) matchedItem.price(_price);
if (_status != null) matchedItem.status(_status);
}
};
self.UpdateData = function(dataContext){
var itemToEdit = dataContext;
itemToEdit.status("Out of Stock");
};
};
var vm = new appViewModel();
ko.applyBindings(vm);

Answer 1

You can add a Mutated array to your view-model:
self.Mutated = ko.observableArray();
And upon updating / adding, add the item id to the array:
self.Mutated.push(_id);
Then in your HTML, have a mutated class on each <TR> that is indeed mutated:
<tr data-bind="css: { mutated: $root.Mutated.indexOf(id()) > -1 }">
And the CSS:
table.imagetable tr.mutated td { background-color: red; }
See Fiddle