JSFiddle - React, Tailwind, and code Playground

by asifrc

HTML

<table width="600px" class="setpoint-form-table">
    <tr>
        <td colspan="5">
            <p style="font-size:16px; float:left;">First Name / Last Name Table Post and Edit</p>
        </td>
    </tr>
    <tr>
        <td colspan="5" height="20px"></td>
    </tr>
    <tr>
        <input type="text" id="RowPlaceholder2" style="visibility:hidden;" />
        <td width="100px" style="font-size:14px">First Name</td>
        <td>
            <input type="text" id="fName" class="setpoint-textbox" />
        </td>
        <td width="100px" style="font-size:14px;">Last Name</td>
        <td>
            <input type="text" id="lName" class="setpoint-textbox" />
        </td>
        <td>
            <button type="button" id="edit">Edit</button>
        </td>
    </tr>
    <tr>
        <td colspan="5" height="20px"></td>
    </tr>
    <tr>
        <td colspan="5">
            <button type="button" onclick="HvacStandards()">Submit</button>
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <br />
            <br />
            <table width="600px" id="testingWithEdit">
                <tr>
                    <td style="background-color:#fff; color:#00468C; border-bottom:1px solid #000; border-right:1px solid #000;">First Name</td>
                    <td style="background-color:#fff; color:#00468C; border-bottom:1px solid #000;">Last Name</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

JavaScript

newRow = 1;
currentRow = -1;

function HvacStandards() {
    var rowID = newRow;
    if (currentRow>0) {
        saveEdits();
    } else {
        var firstName = $("#fName").val();
        var lastName = $("#lName").val();
        var sHtml = "<tr id='row"+rowID+"'>" +
            "<td id=\"firstName" + rowID + "\">" + firstName + "</td>" +
            "<td id=\"lastName" + rowID + "\">" + lastName + "</td>" +
            "<td><button onclick='editRow(" + rowID + ")'>Edit</button>&nbsp;" +
            "<button onclick='deleteRow(" + rowID + ")'>Delete</button>" +
            "</tr>";
        $("#testingWithEdit").append(sHtml);
        newRow++;
        $("#fName,#lName").val("");
    }
}
function editRow(rowID) {
    $('#fName').val( $('#firstName'+rowID).html() );
    $('#lName').val( $('#lastName'+rowID).html() );
    currentRow = rowID;
}
function saveEdits()
{
    $('#firstName'+currentRow).html( $('#fName').val() );
    $('#lastName'+currentRow).html( $('#lName').val() );
    $("#fName,#lName").val("");
    currentRow = -1;
}
function deleteRow(rowID)
{
    $('#row'+rowID).remove();
}