JSFiddle - React, Tailwind, and code Playground

by krishnafru

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Parsing - Auto-Refresh</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    <h2>DOM Parsing - Auto-Refresh</h2>
    <div id="main">
      <div id="toolbar">
        <a href="#create" id="lnk_create">create</a>
        &nbsp;||&nbsp;
        <a href="#start" id="lnk_load">load</a>
        &nbsp;||&nbsp;
        <a href="#start" id="lnk_start">start</a>
        &nbsp;||&nbsp;
        <a href="#stop" id="lnk_stop">stop</a>
        &nbsp;||&nbsp;
        <a href="#remove" id="lnk_remove">remove</a>
      </div>
      <br />
      <div style="height: 480px; overflow: auto;">
        <table id="list" width="100%" border="1"><tbody></tbody></table>
      </div>
    </div>
  </body>
</html>

JavaScript

var grid, recordno = 0,
    colCount = 2,
    rowCount = 100,
    interval = 15,
    running = false;

$(function() {
    $('#lnk_create').click(doCreate);
    $('#lnk_load').click(doLoading);
    $('#lnk_start').click(doStart);
    $('#lnk_stop').click(doStop);
    $('#lnk_remove').click(doUnload);

    $('#lnk_create').click();
});

function invoke() {
    if (!running) {
        return;
    }
    $('#lnk_load').click();
    setTimeout(invoke, 1000 * interval);
}

function getRow() {
    recordno++;
    var list = ["<td>" + recordno + "</td>"];
    for (var i = 1; i <= colCount; i++) {
        list.push("<td>" + "2007-10-" + (recordno + "-" + i) + "</td>");
        list.push("<td>" + "first name " + (recordno + "-" + i) + "</td>");
        list.push("<td>" + "last name " + (recordno + "-" + i) + "</td>");
        list.push("<td>" + "location " + (recordno + "-" + i) + "</td>");
        list.push("<td>" + "mobile " + (recordno + "-" + i) + "</td>");
        list.push("<td>" + "landline " + (recordno + "-" + i) + "</td>");
        list.push("<td>" + "address " + (recordno + "-" + i) + "</td>");
        list.push("<td>" + "email " + (recordno + "-" + i) + "</td>");
    }
    return list.join(' ');
}

function doLoading() {
    grid.find('tr').remove();
    for (var i = 1; i <= rowCount; i++) {
        grid.find('tbody').append('<tr>' + getRow() + '</tr>');
    }
    return false;
}

function doStop() {
    running = false;
    return false;
}

function doStart() {
    if (running) {
        return;
    }
    running = true;
    invoke();
    return false;
}

function doUnload() {
    grid.find('tr').remove();
    grid = undefined;
    return false;
}

function doCreate() {
    grid = $('#list');
    //grid = $('<table></table>');
    return false;
}