JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<table>
    <tr>
        <td>This</td>
        <td>is</td>
        <td>some</td>
        <td>sample</td>
        <td>text.</td>
    </tr>
    <tr>
        <td>This</td>
        <td>is</td>
        <td>more</td>
        <td>sample</td>
        <td>text.</td>
    </tr>
</table>
<p>Select something using the mouse: <span id="coords"></span></p>

CSS

table {
    border: 2px solid #0000FF;
}

tr {
    
}


td {
    border-right: 2px solid #0000FF;
    border-bottom: 2px solid #0000FF;
    width: 80px;
    padding: 2px;
}

JavaScript

// this is for getting the selected text from the body even without an input
function getSelection() {
    var sel = document.selection;
    if (window.getSelection) {
        sel = window.getSelection();
    }
    return sel;
}

document.onmouseup = function() {
    var selection = getSelection();
    document.getElementById("coords").innerHTML = selection;
};