JSFiddle - React, Tailwind, and code Playground

by ic_productions

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<body>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">One</a></li>
        <li><a href="#tabs-2">Two</a></li>
        <li><a href="#tabs-3">Three</a></li>
    </ul>
    <div id="tabs-1">
        One Contents
        <div id="tableContainer"></div>
    </div>
    <div id="tabs-2">
        Two Contents
    </div>
    <div id="tabs-3">
        Three Contents
        <form id="selectTable" action="" method="post">
            <button id="getTable"> Select table </button>
        </form>
    </div>
</div>

</body>

JavaScript

$(document).ready(function()
    {
        $("#getTable").click(function()
        {
            var tmp = "";
            for(var i = 0; i < 30; i++)
            {
                tmp += '<th style="width: 240px; font-size: 14pt;">Header</th>'
            }
            tmp = '<table border="1" padding="3"><thead><tr>' + tmp + '</tr></thead></table>';

            $("#tableContainer").html(tmp);
            // In real life the table is the result of an AJAX call, table width depends on the columns choosen by the user
            return false;

        });

    });
    $("#tabs").tabs();