Javascript 编辑HTML表格单元格

我有一张几排的桌子。。。我希望能够选择一行并单击“修改”，我应该能够使该行的所有单元格都可编辑

---

如何使单元格在Javascript中可编辑？使用Jquery是否更好？

您可以在每个单元格中插入文本框，并将值设置为表单元格的值

像这样的

$(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>

然后，您可以放置一个更新按钮，从文本框中获取值并进行更新。

这里有一个我刚刚为您准备的：

$(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>");
      });
    });
  });
});

-

要编辑的每个元素的Setcontent editable属性。

---

不需要自己编写代码，已经有了一个用于jQuery的插件。试试看，它能完全满足你的需要

他们的演示页面有一些很好的例子：

---

从技术上说，他确实想点击某种“修改”按钮，但我认为你的方式更好。yellow-05，这个函数的作用是将你双击的任何表格单元格变成文本区域，因此你需要对其进行一点扩展，使其完成整行。首先，他们希望他们的宗教得到认可，现在，这些绝地武士希望所有表格都是他们自己的！它将在哪里结束？

<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>