JSFiddle - React, Tailwind, and code Playground

by michapixel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ICanHaz.js/0.10.3/ICanHaz.min.js"></script>
        
        
    <script id="display_row" type="text/html">
        <tr>
            <td>{{data1}}</td>
            <td>{{data2}}</td>
            <td>{{data3}}</td>
        </tr>
    </script>
        
        
        
        <h1>Icanhazjs & Mustache Table Test</h1>
        <table border="1">
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                </tr>
            </thead>

            <tbody id="table_list">
            </tbody>
        </table>

CSS

body.act {
  background: #FFF;
}

JavaScript

$('body').on('click', function () {
        $(this).toggleClass('act')
                var user_data, user;

                user_data = [
                    {
                    data1: "foo1",
                    data2: "foo2",
                    data3: "foo3"
                    },
                    {
                    data1: "foo4",
                    data2: "foo5",
                    data3: "foo6"
                    }
                 ];

                for (i=0; i<user_data.length; i++) {
                    user = ich.display_row(user_data[i]);
                    $('#table_list').append(user);
                }

            });