JSFiddle - React, Tailwind, and code Playground

by Tintu Raju

HTML

<table border="1" style="width:100%">
   <tr>
     <td>Row 1 Col1</td>
     <td>Row 1 Col2</td>
     <td>Row 1 Col3</td>
     <td>Row 1 Col4</td>
     <td>Row 1 Col5</td>
     <td>Row 1 Col6</td>
   </tr>
   <tr>
     <td>Row 2 Col1</td>
     <td>Row 2 Col2</td>
     <td>Row 2 Col3</td>
     <td>Row 2 Col4</td>
     <td>Row 2 Col5</td>
     <td>Row 2 Col6</td>
   </tr>
     <tr>
     <td>Row 3 Col1</td>
     <td>Row 3 Col2</td>
     <td>Row 3 Col3</td>
     <td>Row 3 Col4</td>
     <td>Row 3 Col5</td>
     <td>Row 3 Col6</td>
   </tr>   
 </table> 

<form>
      <input type="text" id="rows" placeholder="Row" value="row"/>
      <input type="text" id="cols" placeholder="Column" value="column"/>
      <button id="submitButton" type="submit"> Submit </button>
 </form>

JavaScript

$(document).ready(function(){
    
    $("#submitButton").click(function(){       
        var row       = parseInt($("#rows").val())-1;
        var col       = parseInt($("#cols").val())-1;
        var greeting = "hello";
        
        if(isNaN(row)|| isNaN(col)) {
             alert('Please enter a valid row and column number');
             return false;
        }
        
        var x = $("table").find("tr").eq(row).find("td").eq(col);
        if(x.length==0)
           alert('Such a row and column not found ');   
        else if(x.text()==greeting)
           alert("Already selected "); 
        else 
           x.text(greeting);
        return false;
    });
});