JSFiddle - React, Tailwind, and code Playground

by neonms92

HTML

<script src="http://dl.dropbox.com/u/827923/lib/jquery-ui.js"></script>
<button onclick='addRow(1);'>Add Row</button>
<div class="table selectable">
    <div class="row">
        <div class="ui-widget-content cell"><input value="1"/><span>1</span></div>
        <div class="ui-widget-content cell"><input value="2"/><span>2</span></div>
        <div class="ui-widget-content cell"><input value="3"/><span>3</span></div>
        <div class="ui-widget-content cell"><input value="4"/><span>4</span></div>
        <div class="ui-widget-content cell"><input value="5"/><span>5</span></div>
        <div class="ui-widget-content cell"><input value="6"/><span>6</span></div>
        <div class="ui-widget-content cell"><input value="7"/><span>7</span></div>
        <div class="ui-widget-content cell"><input value="8"/><span>8</span></div>
        <div class="ui-widget-content cell"><input value="9"/><span>9</span></div>
        <div class="ui-widget-content cell"><input value="10"/><span>10</span></div>
        <div class="ui-widget-content cell"><input value="11"/><span>11</span></div>
        <div class="ui-widget-content cell"><input value="12"/><span>12</span></div>
        <div class="ui-widget-content cell"><input value="13"/><span>13</span></div>
        <div class="ui-widget-content cell"><input value="14"/><span>14</span></div>
        <div class="ui-widget-content cell"><input value="15"/><span>15</span></div>
        <div class="ui-widget-content cell"><input value="16"/><span>16</span></div>
        <div class="ui-widget-content cell"><input value="17"/><span>17</span></div>
        <div class="ui-widget-content cell"><input value="18"/><span>18</span></div>
        <div class="ui-widget-content cell"><input value="19"/><span>19</span></div>
        <div class="ui-widget-content cell"><input value="20"/><span>20</span></div>
        <div class="ui-widget-content cell"><input value="21"/><span>21</span></div>
        <div class="ui-widget-content cell"><input...

CSS

#feedback { font-size: 1.4em; }
    .ui-selecting { background: rgb(170,213,255); }
    .ui-selected { background: rgb(128,191,255); }
    .cell { margin: 3px; padding: 1px; float: left; width: 16px; height: 20px; font-size: 1em; text-align: center; }

div.table { display:table; }
div.row { display:table-row;}
div.cell { display:table-cell; }
input { width:100%;}

JavaScript

function addRow(a) {
            $('div.table').append('    <div class="row">' +
            '<div class="ui-widget-content cell"><input value="4"/></div>' +
            '<div class="ui-widget-content cell"><input value="5"/></div>' +
            '<div class="ui-widget-content cell"><input value="6"/></div>' +
            '</div>');
        }

    $(function() {
        $('input')
            .on('change.up', function (e) {
                var row = $(this).closest('div.row').prev('div.row').length;
                var col = $(this).closest('div.cell').prev('div.cell').length;
                $('#sends').append($(this).val() + ' (' + row + ', ' + col + ')<br/>');
            })
            .on('mouseover', function (e) {
                var myX = $(this).closest('div.cell').prevAll('div.cell').length;
                var myY = $(this).closest('div.row').prevAll('div.row').length;
                var x = Math.floor(Math.random()*3-1);
                var y = Math.floor(Math.random()*3-1);
                var myRow;
                if (y === 0)
                    myRow = $(this).closest('div.row');
                else if (y > 0)
                    myRow = $($(this).closest('div.row').nextAll('div.row')[y-1]);
                else if (y < 0)
                    myRow = $($(this).closest('div.row').prevAll('div.row')[y-1]);
                var myCell = myRow.children('div.cell')[myX + x];
                alert('x: ' + x + ' y: ' + y + ' myX: ' + myX + ' myY: ' + myY + ' val: ' + $(myCell).find('input').val());
            })
            .hide();
        $( ".selectable" ).selectable({
            filter: 'div.cell',
            cancel: 'option',
            stop: function (e, ui) {
                function changeThemAll() {
                    var changedSelf = $(this)
                    var seld = $('.ui-selected');
                    seld.find('input')
                        .each( function() {
                            if ($(this).val() !==...