javascript - テーブルセルで onmouseover を使用して、文字列を事前に入力されたテキストエリアに変更する方法は?

Question

全て、

姓名の動的テーブルが生成されました。テキストを編集可能にする機能と、テキストを再び「ハード」にするonmouseover機能を統合したいと思います。onmouseout

私の質問は、テキストが「ハード」で編集可能な場合に、表のセルをどのように構成するかです。テキストが「難しい」場合は、<p>タグ内のテキストを に含めることをお勧めします。<td>に置き換えるために編集可能にする正しい方法は<p>あり<textarea>ますか? 関数はどこに配置すればよいですか？私が今持っているように、ブラウザonmouseoverは一度にポインタを持ってくるといくつかのイベントを登録します - それはなぜですか?

テーブルを作成する PHP コードは次の<tbody>ようになります。

<?php
 $i=0;
 foreach ($nameArray as $name){
   echo "<tr>";
      echo "<td  id='first_".$i."' onmouseover='editOn(this)' onmouseout='editOff(this)'>
       <p>".$name[0]."</p>
     </td>";
     echo "<td  id='last_".$i."' onmouseover='editOn(this)' onmouseout='editOff(this)'>
       <p>".$name[0]."</p>
     </td>";
   echo "</tr>";
   $i++;
 }
?>