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 인라인 코드 러너와 함께 잘 작동 :

이 내 코드입니다. 아래 그림에서 같은 코드가 다르게 작동한다는 것을 알 수 있습니다.