Member Avatar for _1_14
_1_14 0 Newbie Poster

in my code below i can edit row success without any error but if i need to cancel value edited in row OR get value before changed what i write to cancel edit in row in table by using jquery my code as following

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script>

        $(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 row = $(this).closest('tr').toggleClass("editing");
               row.find("td").slice(0, 2).prop("contenteditable", row.hasClass("editing"));
              var myselect = '<select id="mycountr1" name="mycountry1">' +
               '<option>---select---</option>' + '<option>Egypt</option>' + '<option>qatar</option>' + '<option>saudia</option>' + '<option>emarates</option>'
              '</select>';
              var dropcountry = $(this).parent().prev().prev().text;
              $(this).parent().prev().prev().html(myselect);

                //$('#tb').append(myselect);
                //  $("#tb").children().children().eq(3).children().eq(3).append("myselect");

            });
            $("#btndis").on('click', function () {
                $("body").append("<ul id='listNames''></ul>");
                $('#tb td:nth-child(2)').each(function () {
                    $("#listNames").append("<li>" + $(this).text() + "</li>")
                });
            });

        });
    </script>

    <style>
        .editing {
            background: yellow;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>
  • 1 Contributor
  • 0 Replies
  • 136 Views

Dani AI

Generated

Short answer: save the row's current values when you enter edit mode, and restore them when Cancel is clicked. Use delegated handlers and store the snapshot on the row with jQuery .data() (or store a small object of cell texts). This is more reliable than trying to “undo” contenteditable changes later.

Example pattern (conceptual; adjust column indexes/options to your table):

// Edit button (delegated)
$("#tb").on("click", ".d", function () {
  var $row = $(this).closest("tr");
  if (!$row.data("orig")) {
    $row.data("orig", {
      id:   $row.find("td").eq(0).text(),
      name: $row.find("td").eq(1).text(),
      country: $row.find("td").eq(2).text()
    });
  }
  $row.addClass("editing");
  $row.find("td").eq(0).html('<input class="edit-id" value="' + $row.data("orig").id + '">');
  $row.find("td").eq(1).html('<input class="edit-name" value="' + $row.data("orig").name + '">');
  // build a select with options and set .val(...) to the saved country
});

Cancel handler (delegated) — restore saved values and remove the snapshot:

$("#tb").on("click", ".e", function () {
  var $row = $(this).closest("tr");
  var orig = $row.data("orig");
  if (orig) {
    $row.find("td").eq(0).text(orig.id);
    $row.find("td").eq(1).text(orig.name);
    $row.find("td").eq(2).text(orig.country);
    $row.removeClass("editing").removeData("orig");
  }
});

Key tips and pitfalls (addresses issues in 's post)

  • Use .text() (call it) to read text, not .text property.
  • Bind handlers with delegation (#tb.on("click", ".selector", ...)) because rows/buttons are dynamic.
  • Avoid duplicating IDs for per-row elements; use classes instead.
  • Prefer inputs/selects for editing instead of contenteditable; inputs are easier to restore.
  • If you snapshot full HTML (e.g., row.data("origHtml", $row.html())), be careful: it also stores IDs and eventless HTML; restoring can re-introduce duplicate IDs or lose event bindings — restoring cell text values is safer.
  • Escape values when inserting into attributes to avoid broken HTML or XSS.

This approach keeps edit/cancel atomic and simple: snapshot on edit, mutate DOM for editing, restore from snapshot on cancel.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.