编辑一个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