Knockout Table & Highlight Example

Knockout Template

by gurkavcu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.2/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div style="float:left">
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table1 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table2 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table3 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table4 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table5 }"></table>
</div>
<div style="float:left">
    <table data-bind="template : { name: 'tableHeaderTmpl' , data : table1 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table2 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table3 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table4 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table5 }"></table>
</div>
<div style="float:left">
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table1 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table2 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table3 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table4 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table5 }"></table>
</div>
<div style="float:left">
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table1 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table2 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table3 }"></table>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table4...

CSS

table {
  border-collapse: separate;
  border-spacing: 1px;
  *border-collapse: expression('separate', cellSpacing = '1px');
}



table,td,th {
    border:1px solid black;
    text-align:center
}

th {
    
    background-color:black;
    color:white;
}

td {
    
    width:50px;
}

JavaScript 1.7

//jQuery.fx.off = true;
ko.bindingHandlers.highlight = {
    update: function(element, valueAccessor) {
        ko.toJS(valueAccessor());
        var old = parseInt($(element).html(), 10);
        var current = parseInt(valueAccessor()(), 10);
        if ($(element).data("ko_init")) {
             
            if (current < old) {
               // $(element).clearQueue();
                $(element).css("background-color","#AA0000");
                $(element).delay(5000).animate({'duration':0,'backgroundColor' : '#ffffff'});
            } else if (current >= old) {
               // $(element).clearQueue();
                $(element).css("background-color",'#00AA00');
                $(element).delay(5000).animate({'duration':0,'backgroundColor' : '#ffffff'});
            }
            
        }
        else {
            $(element).data("ko_init", true);
        }
    }
};

function Table(rowCount, columnCount, headItems, initiliaze) {

    var self = this;

    var Cell = function(data, css) {

        var cellInstance = this;
        
        this.data = ko.observable(data);
        this.css = ko.observable(css);

    }

    this.rowCount = ko.observable(rowCount);
    this.columnCount = ko.observable(columnCount);
    this.headItems = ko.observableArray(headItems);
    this.rowsData = ko.observableArray();

    if (initiliaze) {

        for (var i = 0; i < rowCount; i++) {
            var tmpArray = new Array();
            for (var j = 0; j < columnCount; j++)
            tmpArray.push(new Cell("0", ""));
            self.rowsData.push(ko.observableArray(tmpArray));
        }
    }
}

function ViewModel() {
    var self = this;

    this.table1 = new Table(5, 4, ["Name", "DT", "BID", "ASK"], true);
    this.table2 = new Table(5, 4, ["Name", "DT", "BID", "ASK"], true);
    this.table3 = new Table(5, 4, ["Name", "DT", "BID", "ASK"], true);
    this.table4 = new Table(5, 4, ["Name", "DT", "BID", "ASK"], true);
    this.table5 = new Table(5, 4, ["Name", "DT",...