JSFiddle - React, Tailwind, and code Playground

by littlesandra88

HTML

<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
<div class="page-body">
    
    <table class="alerts tablesorter" id="accTable" cellspacing="0">
        <thead> 
            <tr class="header">
                <th colspan=2 class="activity-header"> N      </th>
                <th colspan=2 class="activity-header"> Signed </th>
                <th colspan=2 class="activity-header"></th>
            </tr>
        </thead> 
        
        <tbody>      
            <form action="" method="post">
                <input name="anchor" value="2548" type="hidden">
                <tr class="row" id="2548">
                    <td colspan=2 class="activity-data">2548</td>
                    <td colspan=2 class="checkbox"> <span>1</span> <input name="signed" type="checkbox" checked > </td>
                    <td colspan=2 class="edit-column"><a href="javascript:addRemove('2548');">Details</a> <input value="Save" type="submit"></td>
                    
                </tr>
            </form>
            
            <form action="" method="post">
                
                <input name="anchor" value="7249" type="hidden">
                <tr class="row" id="7249">
                    <td colspan=2 class="activity-data">7249</td>
                    <td colspan=2 class="checkbox"> <span>0</span> <input name="signed" type="checkbox"  > </td>
                    <td colspan=2 class="edit-column"><a href="javascript:addRemove('7249');">Details</a> <input value="Save" type="submit"></td>
                </tr>
            </form>
            
            <form action="" method="post">
                <input name="anchor" value="49914" type="hidden">
                
                <tr class="row" id="49914">
                    <td colspan=2 class="activity-data">4991</td>
                    <td colspan=2 class="checkbox"> <span>1</span>...

CSS

body { background-color: white; color: black; font-family: arial,sans-serif; margin: 4px 8px; }

div.page-body { padding: 0pt 1em; display: table; }

table.alerts { border-collapse: separate; border-spacing: 0pt; padding-top: 0.6em; }

tr.header { background-color: rgb(235, 239, 249); }

th.activity-header { text-align: left; font-weight: normal; padding: 0.4em 1em 0.4em 0.3em; }

td.activity-data { padding: 0.4em 1em 0.4em 0.3em; min-width: 10em; }

td.checkbox, tr.edit-row td.checkbox { min-width: 1em; max-width: 3em; padding: 0.2em 0.3em; }

td.edit-column, tr.edit-row td.edit-column { min-width: 5em; text-align: right; white-space: nowrap; padding-right: 0.6em; }

tr.edit-row td {padding: 0;padding-right: 1em;padding-left: 0.3em;background-color: #fff8e7;border-top: 0.3em solid #fff8e7;border-bottom: 0.2em solid #fff8e7; }

tr.edit-row td.edit-column input {margin-right: 0.5em;}

tr.edit-row td.edit-column a {color: #4272db;text-decoration: none;}

tr.row { padding-top: 1.3em; }
tr.row:hover { background-color: rgb(235, 239, 249); }

JavaScript

$(document).ready(function() {
    $("#accTable").tablesorter();

    $('#accTable input:checkbox').click(function() {
        var order = this.checked ? '1' : '0';
        $(this).prev().html(order);

        $(this).parents("table").trigger("update");
    });

});

// sends the form content to server side, and stay on page
$('form').live('submit', function() {

    // don't redirect
    return false;
});



function addRemove(id) {

//    if ($('#details_' + id).size() == 0) {
    if ($('.act').size() == 0) {

        var dat = [
            {
            ID: "The Red Violin",
            FROM: "1998"},
        {
            ID: "Eyes Wide Shut",
            FROM: "1999"},
        {
            ID: "The Inheritance",
            FROM: "1976"}
        ];

//        var markup = "<tr> <td colspan=3>${ID}</td> <td colspan=3>${FROM}</td> </tr>";
        var markup = '<tr class="act"> <td colspan=3>${ID}</td> <td colspan=3>${FROM}</td> </tr>';

        
        // Compile the markup as a named template
        $.template("actTemplate", markup);

        $.tmpl("actTemplate", dat).insertAfter('#' + id);



    } else {
//        $('#details_' + id).remove();
        $('.act').remove();
    }

}