JSFiddle - React, Tailwind, and code Playground

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" style="display: none">
                   ...

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;
   ...

JavaScript

var restore = function (e) {
    $("#columns .selected .selector:first").html("<i>&nbsp;</i>");
};

var showIcon = function (e) {
    console.log(e.type);
    $("#columns .selected .selector").html(this.innerHTML);
}

var clic = function (e) {
    e.preventDefault();
}

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

// UP
$("#move-column-up")
    .bind("click", clic)
    .bind("focus mouseover", showIcon)
    .bind("blur mouseout", restore)

// DOWN
$("#move-column-down")
    .bind("click", clic)
    .bind("focus mouseover", showIcon)
    .bind("blur mouseout", restore)