JSFiddle - React, Tailwind, and code Playground

by craigm

HTML

<table width="100%">
    
    <tbody><tr class="head">
        
        <th>First Name</th><th>Last Name</th>
        
        </tr>
        
        <tr id="1" class="edit_tr">
            
            <td width="50%" class="edit_td">
                
                <span id="first_1" class="text" style="display: inline; ">Bill</span>
                
                <input type="text" value="Bill" class="editbox" id="first_input_1" style="display: none; ">
                
            </td>
            
            <td width="50%" class="edit_td">
                
                <span id="last_1" class="text" style="display: inline; ">Gates</span> 
                
                <select type="text" class='editbox' value="Gates" class="editbox" id="last_input_1" style="display: none; ">
                    <option>Test 1</option>
                    <option>Test 2</option>
                </select>
            </td>
            
        </tr>
        
        
        
        <tr id="2" bgcolor="#f2f2f2" class="edit_tr">
            
            <td width="50%" class="edit_td">
                
                <span id="first_2" class="text" style="display: inline; ">Tim </span>
                
                <input type="text" value="Tim " class="editbox" id="first_input_2" style="display: none; ">
                
            </td>
            
            <td width="50%" class="edit_td">
                
                <span id="last_2" class="text" style="display: inline; ">Berners</span> 
                
                <input type="text" value="Berners" class="editbox" id="last_input_2" style="display: none; ">
                
            </td>
            
        </tr>
        
        
        
        <tr id="3" class="edit_tr">
            
            <td width="50%" class="edit_td">
                
                <span id="first_3" class="text" style="display: inline; ">Evan</span>
                
                <input type="text"...

JavaScript

$(document).ready(function() {
    $(".edit_tr").click(function(e) {
        if ($(e.target).hasClass('edit_td') || $(e.target).hasClass('text')) {
        var ID = $(this).attr('id');
        $("#first_" + ID).hide();
        $("#last_" + ID).hide();
        $("#first_input_" + ID).show();
        $("#last_input_" + ID).show();
    }}).change(function() {
        var ID = $(this).attr('id');
        var first = $("#first_input_" + ID).val();
        var last = $("#last_input_" + ID).val();
        var dataString = 'id=' + ID + '&firstname=' + first + '&lastname=' + last;
        $("#first_" + ID).html('<img src="load.gif" />'); // Loading image
        if (first.length > 0 && last.length > 0) {

            //$.ajax({
            //    type: "POST",
            //    url: "table_edit_ajax.php",
            //    data: dataString,
            //    cache: false,
           //     success: function(html) {
             //       $("#first_" + ID).html(first);
              //      $("#last_" + ID).html(last);
              //  }
           // });
        }
        else {
            alert('Enter something.');
        }

    });

    // Outside click action
    $(document).mouseup(function(e) {
        if (!$(e.target).hasClass('editbox')) {
            $(".editbox").hide();
            $(".text").show();
        }
    });

});