JSFiddle - React, Tailwind, and code Playground

by sendil J

HTML

<table class='table_class_name'>
  <tr>
    <td class='locked_class_name'>Upper left is moving both wayslocked</td>
    <td class='column_class_name'>column 1</td>
    <td class='column_class_name'>column 2</td>
    <td class='column_class_name'>column 3</td>
  </tr>
  <tr>
    <td class='row_class_name'>row 1</td>
    <td>data 1</td>
    <td>data 2</td>
    <td>data 3</td>
  </tr>
  <tr>
    <td class='row_class_name'>row 2</td>
    <td>data 1</td>
    <td>data 2</td>
    <td>data 3</td>
  </tr>
</table>

JavaScript

TL_tables = new Array();


function TL_settings(table_id, left_class_name, headline_class_name, 
                     lock_class_name) 

{
    this.row_elements = new Array();
    this.col_elements = new Array();
    this.lock_elements = new Array();
    this.table_id = table_id;
    this.left_class_name = left_class_name;
    this.headline_class_name = headline_class_name;
    this.lock_class_name = lock_class_name;
}

function TL_struct(node, oldnode, xpos, ypos)
{
    this.node = node;
    this.oldnode = oldnode;
    this.x = xpos;
    this.y = ypos;
}

function TableLock(table_id, 
                   left_class_name,
                   headline_class_name, 
                   lock_class_name) 
{
    var tlt = new TL_settings(table_id, left_class_name, headline_class_name, 
                   lock_class_name);
    TableLock_resize(tlt);
    TL_tables.push(tlt);
    this.onscroll = TableLock_update;
    TableLock_update();

    // Detect resize every second
    window.setInterval(function(){
        var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        if(tlt.innerwidth != width &&
           tlt.innerheight != height){
            TableLock_resize(tlt);
            TableLock_update();
        }
    }, 1000);
}

function TableLock_resize(tlt) 
{
    tlt.table_element = document.getElementById(tlt.table_id);
    if (tlt.table_element == undefined) {
        alert("TableLock can't find table " + tlt.table_id);
        return;
    }

    // Remove any old objects
    for(var i = 0; i < tlt.row_elements.length; i++){
        var obj = tlt.row_elements[i];
        document.body.removeChild(obj.node);
    }
    for(var i = 0; i < tlt.col_elements.length; i++){
        var obj = tlt.col_elements[i];
        document.body.removeChild(obj.node);
    }
    for(var i = 0; i < tlt.lock_elements.length; i++){
 ...