여러 행에서 표 셀 데이터를 편집하는 방법?

여러 행에 자바 스크립트가있는 표 셀에서 데이터 편집을 활성화하려면 어떻게해야합니까?
셀 데이터를 가져 와서 이전 데이터가있는 텍스트 상자로 바꾸고 편집을 마친 후 셀에 데이터를 저장하는 코드를 작성했습니다. 하지만 여러 테이블 행을 사용하여이를 가능하게하고 싶습니다. Btw. 테이블은 PHP가 생성됩니다.여러 행에서 표 셀 데이터를 편집하는 방법?

<!DOCTYPE html> 
<html> 
<head> 
    <title>EDIT USER</title> 
    <script> 
     function edit() { 
      var a = document.getElementById("fname").innerHTML; 
      var b = document.getElementById("lname").innerHTML; 
      document.getElementById("fname").innerHTML='<input id="fnamefld" type="text" value="'+a+'"'+' />'; 
      document.getElementById("lname").innerHTML='<input id="lnamefld" type="text" value="'+b+'"'+' />'; 
      document.getElementById("edit_btn").disabled=true; 
      document.getElementById("done_btn").disabled=false; 
     } 
     function done() { 
      document.getElementById("done_btn").disabled=true; 
      document.getElementById("edit_btn").disabled=false; 
      var a = document.getElementById("fnamefld").value 
      var b = document.getElementById("lnamefld").value 
      document.getElementById("fname").innerHTML=a; 
      document.getElementById("lname").innerHTML=b; 
     } 
    </script> 
</head> 
<body> 
    <table border="0"> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Edit?/Done?</th> 
     <tr> 
      <td id="fname">User fname</td> 
      <td id="lname">User lname</td> 
      <td> 
       <button id="edit_btn" onclick="edit()">Edit!</button> 
       <button id="done_btn" onclick="done()">Done!</button> 
      </td> 
     </tr> 
    </table> 
    <script> document.getElementById("done_btn").disabled=true;</script> 
</body> 
</html>

출처

2014-07-07 conquistador

여러 행이 무엇을 의미합니까 :

여기 내 코드입니까? 그래서 행의 모든 셀에 텍스트 상자를 복사합니까? – Cheruvian

먼저 편집 모드에서 텍스트 상자를 잠긴 상태로 유지할 수 있습니다. 테두리가 없으면 텍스트 상자와 레이블을 그대로 두지 않고 표시/숨기기를 전환 할 수 있습니다. – inon