HTML contenteditable = true無序/改變表格行結構意外

當我點擊編輯按鈕，並嘗試編輯電子郵件列的內容.HTML表結構奇怪地改變。HTML contenteditable = true無序/改變表格行結構意外

這是我的代碼片段：

<!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(){ 
 
\t $("#fname").attr('contenteditable','true'); 
 
\t $("#lname").attr('contenteditable','true'); 
 
\t $("#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> 
 
\t \t <th>Delete</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td id="fname">John</td> 
 
     <td id="lname">Doe</td> 
 
     <td id="email">[email protected]</td> 
 
\t \t <td><button class="btn btn-danger" id="delete" onclick="deleteAction()">Delete</button></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 

 
</body> 
 
</html>

這段代碼與SO內嵌代碼段亞軍效果很好。但是您可以在下圖中看到相同的代碼工作方式不同。