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
Code:
@{
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>