JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://nje.github.io/jquery-tmpl/jquery.tmpl.js"></script>
<script id="summaryTemplate" type="text/x-jquery-tmpl">
    <tr class='movieSummary'>
        <td colspan='2'>${Title}</td>
    </tr>
</script>

<script id="detailTemplate" type="text/x-jquery-tmpl">
    <tr class='movieDetail movieDetail_c'>
        <td>${Title}</td>
    </tr>
    <tr class='movieDetail'>
        <td>Год(а): ${Year}</td >
    </tr>
    <tr class='movieDetail'>
        <td>${Info}</td >
    </tr>
</script>

Для подробностей кликните по пункут:
<table>
    <tbody id="movieList"></tbody>
</table>

CSS

table {
    border: 1px solid #cccccc;
    border-bottom: 0 solid #cccccc;
    border-spacing: 0;
    width: 100%;
}
table tr td {
    padding: 2px 8px;
}
.movieSummary {
    background: #DAECFF;
    cursor: pointer;
}
.movieSummary td {
    border-bottom: 1px solid #cccccc;
}
.movieDetail {
    background: #154C88;
    color: #ffffff;
}
.movieDetail_c {
    cursor: pointer;
    }
.movieDetail + .movieDetail {
    background: #68A5E7;
}
.movieDetail td {
    border-bottom: 1px solid #cccccc;
}

JavaScript

var movies = [{
    Title: "Родился",
    Year: "1982",
    Info: "В Белоруссии, город Минск"
}, {
    Title: "Учёба",
    Year: "1988 - 1997",
    Info: "Школа"
}, {
    Title: "Учёба (дополнительно)",
    Year: "1997 - 2000",
    Info: "Коледж"
}, {
    Title: "В промежутке",
    Year: "2000 - 2008",
    Info: "Искал способы реализации"
}, {
    Title: "В данный момент",
    Year: "2008 - ....",
    Info: "ЧП NetBerry - должность Программист"
}];
var selectedItem = null;
alert(movies[0]['Title']);
$("#summaryTemplate").tmpl(movies).appendTo("#movieList");

$("#movieList")
    .delegate(".movieSummary", "click", function () {
    if (selectedItem) {
        selectedItem.tmpl = $("#summaryTemplate").template();
        selectedItem.update();
    }
    selectedItem = $.tmplItem(this);

    selectedItem.tmpl = $("#detailTemplate").template();
    selectedItem.update();
})
    .delegate(".movieDetail_c", "click", function () {
    selectedItem.tmpl = $("#summaryTemplate").template();
    selectedItem.update();
    selectedItem = null;
});