JSFiddle - React, Tailwind, and code Playground

by MaurizioPiccini

HTML

<table>
            <tbody data-bind="foreach: sitesTable.rows" >
                <tr data-bind="foreach: row">
                    <td data-bind="template: 'myTemplate' "></td>
                </tr>
            </tbody>
    </table>

<br/>


<a href="#" onclick="getNewData()"> click here </a>
<script id="myTemplate" type="text/html">
    <a href='#' data-bind="html: cellValue, click: openAlert"> click </a>
</script>

JavaScript

var sitesTableModel = {
    rows: ko.observableArray(row = ko.observableArray([{ cellValue: "fghfg" }])),
    currentSelected: ko.observable(),
    selectItem: function (that, site) {
        that.currentSelected(site.itemID);

};


//overall viewModel
var viewModel = {
    sitesTable: sitesTableModel

};

ko.applyBindings(viewModel);


function getNewData(){
    
    var dataKO = "this is a link from a db. click with knockout";
    var dataJS = "this is a link from a db. click with javascript";
    
    var itemRows = [];
    var itemRowValuesKO = []; 
    var itemRowValuesJS = []; 
    
    var rowValueFormattedKO =dataKO;// "<a id='testID'  href='#' data-bind=click: openAlert>" + dataKO + "</a>";
    var rowValueFormattedJS =dataJS;// "<a href='#' onclick=alert('hello')>" + dataJS + "</a>";
       
    
    itemRowValuesKO.push({ cellValue: rowValueFormattedKO });
    itemRowValuesJS.push({ cellValue: rowValueFormattedJS });
    
    itemRows.push({ row: itemRowValuesKO });
    itemRows.push({ row: itemRowValuesJS });
    
    viewModel.sitesTable.rows(itemRows);
    
};

function openAlert(site, data){
    alert("asdadvasdv");
    viewModel.sitesTable.selectItem(site, data);
    
};