JSFiddle - React, Tailwind, and code Playground

by amir_ch

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<h3>Ads List</h3>

<table>
    <thead>
        <tr><th>ID</th><th>Name</th></tr>
    </thead>
    <tbody data-bind="foreach: adsList">
        <tr>
            <td data-bind="text: ID"></td>
            <td data-bind="text: Name"></td>
        </tr>			
    </tbody>
</table>

<br><input type="checkbox" data-bind="checked: details"/> Show Details<br><br>
    
<div data-bind="visible: details()">
    <input type="checkbox" data-bind="checked: editable"/> Enable Edit
    <hr></hr>
    Ad ID: <span style="margin-left: 24px" data-bind="text: currentAd() ? currentAd().ID : 'N/A'"></span><br>
    Ad Name: <input type="input" data-bind="enable: editable(), value: currentAd() ? currentAd().Name : 'N/A'"/>
</div>

CSS

body { 	
			font-family: Arial;
			font-size: 12px;
		}
		table {
			border-collapse: collapse;   
			border: 1px solid #aaa;
		}
		tr {
			background-color: #eee;
			border-top: 1px solid #aaa;
		}
		th {
			text-align: left;
			width: 70px;
			background-color: #ccc;
		}
		th, td {
			padding: 3px 5px;
		}
		table td:hover {
			cursor: pointer;
		}
		
		div {
			width: 220px;
			padding-top: 10px;
			padding-left: 10px;
			padding-bottom: 10px;
			padding-right: 10px;
			background-color: #eee;
			border: 1px solid #000;
		}

JavaScript

var viewModel = {
    adsList: ko.observableArray(),
    currentAd: ko.observable(),
    details: ko.observable(false),
    editable: ko.observable(false)
};
ko.applyBindings(viewModel);

for (var i=1; i<11; i++)
    viewModel.adsList.push({"ID":i,"Name": ko.observable("Ad "+i)});

$('table tr').click(function () {
    $("tr").css("background-color", "#eeeeee");
    $(this).css("background-color", "#dddddd");
    viewModel.currentAd(viewModel.adsList()[this.rowIndex-1]);
});