JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<table id="columns">
    <colgroup>
        <col span="1" style="width: 12px;" />
        <col span="1" style="width: 22px;" />
        <col span="1" style="width: 100px;" />
        <col span="1" style="width: 50px;" />
        <col span="1" style="width: 50px;" />
        <col span="1" />
    </colgroup>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th>Título</th>
            <th>Classe CSS</th>
            <th>Tipo</th>
            <th>Conteúdo</th>
        </tr>
    </thead>
    <tbody>
        <tr id="no-data-row" style="display: none;">
            <td colspan="4">Nenhuma coluna criada para o widget</td>
        </tr>
        <tr class="">
            <td class="selector" id="sel-0"><i>&nbsp;</i></td>
            <td>
                </td>
            <td>
                <div class="input">
                    <input id="Colunas_0__Nome" name="Colunas[0].Nome" type="text" value="" />

                </div>
            </td>
            <td>
                <div class="input">
                    <input id="Colunas_0__ClasseCss" name="Colunas[0].ClasseCss" type="text" value="" />

                </div>
            </td>
            <td>
                <div class="input">
                    <select name="Colunas[0].Tipo">
                        <option value="0">Coluna</option>
                        <option value="1">Texto</option>
                        <option value="2">Link</option>
                        <option value="3">Html</option>
                    </select>

                </div>
            </td>
            <td>
                <div class="col-coluna">
                    <div class="input">
                        <select name="Colunas[0].Coluna" class="sql-column">
                        </select>

                    </div>
                </div>
                <div class="col-html"...

CSS

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


table th {
    background: none repeat scroll 0 0 #EEEEEE;
    border-bottom: 1px solid #CDCDCD;
    border-right: 1px solid #CDCDCD;
    padding: 10px;
}

/* Tabelas na janelas popup */
table {
    margin: 5px;
    margin-top: 8px;
    width: 95%;
}

table th {
    padding: 2px;
    background-color: #eee;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    color: #393939;
    cursor: default;
}

table#columns button {
    width: 32px;
}

table #no-data-row td {
    text-align: center;
    padding: 20px;
    color: black;
}

.dialog table button {
    background-color: #eee;
    -ms-border-radius: 4px;
    border-radius: 4px;
    border-width: 1px;
    cursor: pointer;
    border-color: #ddd;
    border-style: solid;
    color: #444;
    padding: 1px;
}

table button i {
    width: 100%;
    display: inline-block;
}

.dialog table button:hover {
    background-color: white;
    color: #111;
    border-color: #bbb;
}

.dialog table button:active...

JavaScript

var restore = function(e) {
    if ( e.type != "blur" )
        $(this).blur();
    $("#columns .selected .selector").get(0).innerHTML
        = "<i>&nbsp;</i>";
};

var showIcon = function() {
    $("#columns .selected .selector").html($(this).html());
}

$("#columns .selector").live("click", function() {
    var $this = $(this);
    $this.closest("tr").toggleClass("selected");
});

// UP
$("#move-column-up")
.bind("click", function(e) { e.preventDefault(); })
.bind("focus mouseover", showIcon)
.bind("blur mouseout", restore)

// DOWN
$("#move-column-down")
.bind("click", function(e) { e.preventDefault(); })
.bind("focus mouseover", showIcon)
.bind("blur mouseout", restore)