JSFiddle - React, Tailwind, and code Playground

by yuezhizizhang

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <div class="viewer">
        <table id="main-table">
            <thead>
                <tr>
                    <th></th>
                    <th scope="col">A</th>
                    <th scope="col">B</th>
                    <th scope="col">C</th>
                    <th scope="col">D</th>
                    <th scope="col">E</th>
                    <th scope="col">F</th>
                    <th scope="col">G</th>
                    <th scope="col">H</th>
                    <th scope="col">I</th>
                    <th scope="col">J</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td></td>
                    <td></td>
            ...

CSS

body {
    font: 13px arial, sans-serif;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    color: #222;
    font-size: 8pt;
}

th {
    font-weight: normal;
    background-color: #eee;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
}

thead th {
    height: 23px;
}

tbody th {
    height: 16px;
    width: 45px;
}

tbody td {
    height: 16px;
    width: 120px;
    overflow: hidden;
    padding: 0 3px;
    border-width: 0 1px 1px 0;
    border: 1px solid #ccc;
}

.viewer {
    position: relative;
}

.overlay {
    background-color: rgba(82, 146, 247, .1);
    position: absolute;
    z-index: 10;
}

.hidden {
    display: none;
}

JavaScript

/*global $: false, EditViewer: false, Overlay: false, HTMLElement: false, Rectangle: false, Point: false, HTMLTableCellElement: false, HTMLTableElement: false */
/*jslint white: true, browser: true, plusplus: true */

$(function() {
    "use strict";
    
    // Specify the table and the overlay div.
    var viewer = new EditViewer($('#main-table'), $('.overlay'));
});

function Point(x, y) {
    "use strict";

    this.x = x || 0;
    this.y = y || 0;
}

function Rectangle(left, top, right, bottom) {
    "use strict";

    this.left = left || 0;
    this.top = top || 0;
    this.right = right || 0;
    this.bottom = bottom || 0;
}

(function() {
    "use strict";

    // Determine whether point locates within the rectangle.
    Rectangle.prototype.contain = function(point) {
        return (point.x >= this.left && point.x < this.right && point.y >= this.top && point.y < this.bottom);
    };

    // Get the width of the rectangle.
    Rectangle.prototype.width = function() {
        return this.right - this.left;
    };

    // Get the height of the rectangle.
    Rectangle.prototype.height = function() {
        return this.bottom - this.top;
    };

    Rectangle.prototype.leftOf = function(rect) {
        return this.left <= rect.left;
    };

    Rectangle.prototype.rightOf = function(rect) {
        return this.right >= rect.right;
    };

    Rectangle.prototype.topOf = function(rect) {
        return this.top <= rect.top;
    };

    Rectangle.prototype.bottomOf = function(rect) {
        return this.bottom >= rect.bottom;
    };

    // Merge two rectangle areas into a large area, which contains both rectangles. 
    Rectangle.prototype.merge = function(rect) {
        var left = this.left,
            top = this.top,
            right = this.right,
            bottom = this.bottom;

        if (!rect) {
            return new Rectangle(left, top, right, bottom);
        }

        if (rect.leftOf(this)) {
            left = rect.left;
        }

       ...