title: How to capture table row on button click to add css class knockout js
body: <p>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. </p>
  
  <p>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</p>
  
  <p>jsfiddle <a href="http://jsfiddle.net/62Ls6x9n/157/" rel="nofollow">http://jsfiddle.net/62Ls6x9n/157/</a></p>
  
  <h2>full code</h2>
  
  <pre><code>&lt;button data-bind="click: AddNewData"&gt;Add New Data&lt;/button&gt;
  &lt;button data-bind="click: UpdateDataByIds"&gt;Update Data&lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
        &lt;table class="imagetable"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;ID&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Price&lt;/th&gt; 
          &lt;th&gt;Status&lt;/th&gt; 
          &lt;th&gt;Edit&lt;/th&gt; 
          &lt;th&gt;Delete&lt;/th&gt; 
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody data-bind="foreach: Stocks"&gt;
          &lt;tr&gt;
              &lt;td data-bind="text: id"&gt;&lt;/td&gt;
              &lt;td data-bind="text: name"&gt;&lt;/td&gt; 
              &lt;td data-bind="text: price"&gt;&lt;/td&gt; 
              &lt;td data-bind="text: status"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;a href="#" data-bind="click: $parent.UpdateData"&gt;edit&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;&lt;a href="#" data-bind="click: $parent.DeleteItem"&gt;delete&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  
  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);
  </code></pre>