JSFiddle - React, Tailwind, and code Playground

by dk_dragonknight

HTML

<body>
      
      
<div>

            <table class="table table-striped" border='1' id="ConTable">
              <thead>
                <tr>
                  <th>#</th>
                  <th>IRC Name</th>
                  <th>Ingame Name</th>
                  <th>Position</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>[Cr|m|nAl]</td>
                  <td><div class='clEdit'>
                  Herbalist
                  </div></td>
                  <td>Aeterna Top</td>
                </tr>
                <tr>
                  <td >2</td>
                  <td >bandido</td>
                  <td><div class='clEdit'>
                  Bananni
                  </div></td>
                  <td >Aeterna Top</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Funkystyle</td>
                  <td><div class='clEdit'>
                  Funkystyle
                  </div></td>
                  <td>Aeterna Top</td>
                </tr>
              </tbody>
            </table>
          </div>
  
  

    <button id="save">Save Changes</button>
     <button id="add">Add Rows</button>
      <button id="del">Delete Rows</button>
  <div id="divCon"  >
  
  
  </div>
    </body>

CSS

.editable{ background:#EAEAEA}

.clEdit
{
  width : 200px; /*Try chaging it as per need*/
  overflow : hidden; /*  try scroll with more height  */
  height : 15px;/*Try chaging it as per need*/
}

JavaScript

$(".clEdit").prop('contenteditable',true);
 
 //Try with hover replace click with hover
 
           $(".clEdit").hover(function(e){
            
            $(this).prop("title",$(this).html());
          
           });
 
  var idFirstCol = 3;
 $("#add").click(function(){
    //LOGIC TO ADD ROW TO TABLE
   
    var trRow = "<tr><td>"+ ++idFirstCol
   + "</td><td>"+ "SecondColValue" +"</td><td><div class='clEdit'>"+ "ThirdColValue" +"</div></td>     <td> "+ "LastColValue"+" </td></tr>";
   
   
   $("#ConTable").append(trRow);
   $(".clEdit").hover(function(e){
            
            $(this).prop("title",$(this).html());
          
           });
           $(".clEdit").prop('contenteditable',true);
 
          
 });