JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

HTML

<table border="1" id="mtable">
   
<tbody>
    <tr>
        <td class="container"></td>
        <td class="container"></td>
        <td class="container"></td>
    </tr>
    <tr>
        <td class="container"></td>
        <td class="container"></td>
        <td class="container"></td>
    </tr>
    
    <tr>
        <td class="container"></td>
        <td class="container"></td>
        <td class="container"></td>
    </tr>  
    
    </tbody>
</table><br/><br/>



<button id="irow">Insert Row</button><br/><br/>
<button id="icol">Insert Column</button><br/><br/>


<input type="button" value="insert" id="inword" />
<input type="text" id="aword" />
<br/>



<button id="randme">randomness</button>

<br/>There are <span id="rowcount"></span> rows
<br/>There are <span id="colcount"></span> columns

CSS

td.container { height: 20px; 
 width: 20px; 
        text-align:center; 
    vertical-align:middle;
}

JavaScript

$('#irow').click(function(){
$("#mtable tbody tr:last").clone().appendTo('#mtable tbody').find("td").empty();    
    
    
    var rowCount = $('#mtable tr').length;
    $("#rowcount").text(rowCount)   
    });
////////////////////////////////////////////
$('#icol').click(function(){ 
        $('#mtable tr').append($("<td class='container'>"));
        $('#mtable thead tr>td:last').html($('#col').val());
        $('#mtable tbody tr').each(function(){$(this).children('td:last').append($(''))});
    
     var col = $('#mtable tbody tr:first > td').length;
    $("#colcount").text(col);    
});
////////////////////////////////////////////
$('#randme').click(function(){
   $('#mtable td').each(function ()
    {
//    var $cell = $(this);
       var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
   $(this).html(possible.charAt(Math.floor(Math.random() * possible.length)));
});
    
});
////////////////////////////////////////////
function ws_checkUD(r,c,word){
  var numCol = $('#mtable tbody tr:first > td').length;
  var numRow = $('#mtable tr').length; 
  var tblArr = $('#mtable > tbody > tr').map(function ()
{
    return $(this).children().map(function ()
    {
        return $(this);
    });
});  
    if (word.length > numRow || word.length + r > numRow) return false;   
    
   var rLoc=r;
   var wordIndex=0;
   while (wordIndex <  word.length) {  
    var let1=word.charAt(wordIndex);
    var let2= tblArr[rLoc][c].text();
       
    if ( tblArr[rLoc][c].text() != '' && let1 != let2) return false;    
    rLoc++; wordIndex++;
   }
  return true;     
   
}
////////////////////////////////////////////
function ws_checkdiagLR (r,c,word){
  var numCol = $('#mtable tbody tr:first > td').length;
  var numRow = $('#mtable tr').length; 
  var tblArr = $('#mtable > tbody > tr').map(function ()
{
    return $(this).children().map(function ()
    {
        return $(this);
    });
}); 
  if (word.length > numCol || word.length + c > numCol)...