JSFiddle - React, Tailwind, and code Playground

get the value of row before changing in table if cancel click jquery

by Akram kamal

HTML

<div>
    ID
    <input type="text" id="txt1" />
    <br /> Name
    <input type="text" id="txt2" />
    <br /> Country:
    <select id="mycountry">
        <option>---select---</option>
        <option>Egypt</option>
        <option>qatar</option>
        <option>saudia</option>
        <option>emarates</option>
    </select>
    <br />
    <input type="button" value="add" id="btn" />
    <input type="button" value="display" id="btndis" />

    <table>
        <thead>
            <tr>
                <td>
                    ID
                </td>
                <td>
                    Name
                </td>
                <td>
                    Country
                </td>
                <td>
            </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>
</div>

CSS

.editing {
            background: yellow;
        }

JavaScript

var myselect = '<select id="mycountr1" name="mycountry1">' +
    '<option>---select---</option>' + '<option>Egypt</option>' + '<option>qatar</option>' + '<option>saudia</option>' + '<option>emarates</option>'
'</select>';

$(function() {
    $("#btn").click(function() {
        var x = $("#txt1").val();
        var y = $("#txt2").val();
        var z = $("#mycountry").val();
        $("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "</td><td> <input type='button'class='c' value='Delete'/></td><td> <input type='button' class='d' value='Edit'/></td><td><input type='button' class='e' value='Cancel'/></td></tr>");


    });
    $("#tb").on("click", ".c", function() {
        //$(this).parent().parent().remove();
        $(this).closest('tr').remove();
    });
    $("#tb").on("click", ".d", function() {
        var dropcountry = $(this).closest("tr").children().eq(2);
        var dropcountryText = dropcountry.text()

        var row = $(this).closest('tr').toggleClass("editing");
        row.find("td").slice(0, 2).prop("contenteditable", row.hasClass("editing"));
        if (dropcountry.find("select").length)
            dropcountry.html(dropcountry.find("select").val())
        else
            dropcountry.html(myselect).find("select").val(dropcountryText);
    });
    $("#btndis").on('click', function() {
        $("body").append("<ul id='listNames''></ul>");
        $('#tb td:nth-child(2)').each(function() {
            $("#listNames").append("<li>" + $(this).text() + "</li>")
        });
    });


});