編輯一個HTML表格單元格

Question

我有一個有幾行的表格...我希望能夠選擇一行並單擊修改，並且我應該能夠使該行的所有單元格都可編輯...

我該如何在Javascript中編輯一個單元格？並且使用Jquery更好嗎？

Answer 1

您可以在每個單元格內插入文本框，並將值設置爲表格單元格的值。

像這樣的事情

$(function(){ 
     $("#tbl1 tr").click (function(){ 
      if (!$(this).hasClass('clicked')) 
      { 
       $(this).children('td').each (function() { 
        var cellValue = $(this).text(); 
        $(this).text('').append ("<input type='text' value='" + cellValue + "' />"); 
       }); 

       $(this).addClass('clicked'); 
      } 
     }); 
    }); 
<table id="tbl1"> 
      <tr> 
       <td>1</td> 
       <td>4</td> 
       <td>3</td> 
      </tr> 
      <tr> 
       <td>4</td> 
       <td>5</td> 
       <td>6</td> 
      </tr> 
     </table> 

您可以再放置一個更新按鈕，並從文本框和更新獲取的值。

Answer 2

這裏有一個quick concept我只是工作爲你：

$(function(){ 
    $("button[name='doModify']").click(function(){ 
    // disable out modify button 
    $(this).attr("disabled","disabled"); 
    // enable our save button 
    $("button[name='save']").removeAttr("disabled"); 
    // cycle through each row having marked for modification 
    $(":checkbox[name='modify']:checked").each(function(){ 
     $(this).closest("tr").find("td:gt(0)").each(function(){ 
     // convert each cell into an editable region 
     $(this).wrapInner("<textarea name='"+$(this).attr("rel")+"'></textarea>"); 
     }); 
    }); 
    }); 
}); 

- 每個元素的

<table border="1" cellspacing="1" cellpadding="5"> 
    <tbody> 
    <tr> 
     <td><input type="checkbox" name="modify" /></td> 
     <td rel="username[]">jon.doe</td> 
     <td rel="information[]">This is my bio.</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="modify" /></td> 
     <td rel="username[]">jonathan.sampson</td> 
     <td rel="information[]">This is my bio.</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="modify" /></td> 
     <td rel="username[]">yellow.05</td> 
     <td rel="information[]">This is my bio.</td> 
    </tr> 
    <tr> 
     <td colspan="3" align="right"> 
     <button name="doModify">Modify</button> 
     <button name="save" disabled="disabled">Save</button> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 3

設置content-editable屬性要編輯。
http://html5demos.com/contenteditable

Answer 4

有沒有必要做你自己的代碼，jQuery的插件已經存在了。嘗試jEditable，它可以做到你所需要的。

他們的演示頁面有一些很好的例子：

http://www.appelsiini.net/projects/jeditable/default.html