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


Tags: css,json,knockout.js

Problem :

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><a href="#" data-bind="click: $parent.UpdateData">edit</a></td>
            <td><a href="#" data-bind="click: $parent.DeleteItem">delete</a></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);


Solution :

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


    CSS Howto..

    How determine what CSS selector to use from my HTML source code?

    How do I control a css child property with javascript?

    CSS - How to overlap elements over everything but each other? (No margin/padding etc)

    How to set img tag vertical center : html + css

    How do I integrate a jQuery script in to my html file?

    How do I remove the blue border when I click on a hotspot mapped to my image in HTML/CSS?

    How to target a CSS ID to a specific HTML tag [closed]

    How can I change the size of this box? (CSS)

    How to make lightbox scroll the lightbox and not the page

    How to use CSS selectors [closed]

    How to align text below an image in CSS?

    How to make Google Preview Button display in a CSS pop-up?

    CSS How to target element without a tag

    Can't figure out how to fix CSS for 3rd party library element

    How can I get the dots that surround some elements to go away/become solid lines?

    CSS: How to center text over an image, both always centered and proportional regardless of window size

    How to give a line break between buttons in css/html?

    How to make a div with arrowlike side without css border tricks?

    How can a transformed Image transition back to it's original shape when hovered?

    How to route requests in codeigniter so we can serve static css, js and img files?

    How to keep border inside to take ribbon over to div?

    jQuery slideshow image delay

    How to generate regular CSS file from SASS?

    Show on hover using CSS and HTML only

    CSS: How to center element that is bigger then the container?

    How can I target a element inside h2

    How to put a button inside of a text entry field in a form on a website using javascript, css, html

    How to hide only a part of the content of a li with CSS?

    Link on Link - How to activate JS code without parent link activation?

    How do I make images fit the entire screen fully, regardless of screen size?