Whenever I attempt to click on the edit button to make changes to the content of the Email column, the HTML table structure begins to change in a strange manner.
Here is the code snippet causing the issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
function deleteAction(){
$("#fname").attr('contenteditable','true');
$("#lname").attr('contenteditable','true');
$("#email").attr('contenteditable','true');
}
</script>
<body>
<div class="container">>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td id="fname">John</td>
<td id="lname">Doe</td>
<td id="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f79d989f99b7928f969a879b92d994989a">[email protected]</a></td>
<td><button class="btn btn-danger" id="delete" onclick="deleteAction()">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>This particular code snippet functions correctly when run using SO inline code snippet runner. However, as shown in the image below, the same code behaves differently.
https://i.sstatic.net/msUCD.png
Is there anyone who can resolve this issue? Please help me identify where I may be making mistakes.