jquery-inline编辑html表格内容

Question

在此表中点击我想要完整的行可编辑。但是使用下面的代码我一次只能编辑单元格。当我点击该行时，tr中的完整单元格应该是可编辑的。

$("#tableid").on("click", "td", function() {

  $(this).parents('tr').css('background-color', 'red');
  var new = $(this).text();
  $(this).addClass("editclass");
  $(this).html("<input type='text' value='" + new + "'/>");

  $(this).children().first().focus();

  $(this).children().first().keypress(function(e) {
    if (e.which == 13) {
      var new1 = $(this).val();
      $(this).parent().text(new1);
      $(this).parent().removeClass("editclass");
    }
  });
  $(this).children().first().blur(function() {
    $(this).parent().text(new);
    $(this).parent().removeClass("editclass");
  });
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableid">
  <thead>
    <tr>
      <th>sno</th>
      <th>name</th>
      <th>id</th>
      <th>language</th>
      <th>state</th>
    </tr>
  </thead>
</table>

Answer 1

您需要设置所有兄弟TD的HTML，而不仅仅是他们点击的那个。

另外，请勿将new用作变量名称，它是一个Javascript保留字。

我为新添加的输入添加了一个click处理程序，用于停止事件冒泡。否则，当您单击某个字段时，它会冒泡到td，然后再次运行处理程序。

＆＃13;

＆＃13;

$("#tableid").on("click", "td", function() {

  $(this).closest('tr').css('background-color', 'red');
  $(this).siblings().addBack().html(function(i, oldhtml) {
    return "<input type='text' value='" + oldhtml + "'/>";
  }).addClass("editclass").find("input").keypress(function(e) {
    if (e.which == 13) {
      var new1 = $(this).val();
      $(this).parent().text(new1);
      $(this).parent().removeClass("editclass");
    }
  }).blur(function() {
    var new1 = $(this).val();
    $(this).parent().text(new1);
    $(this).parent().removeClass("editclass");
  }).click(function(e) {
    e.stopPropagation();
  });
  $(this).find("input").focus();
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableid">
  <thead>
    <tr>
      <th>sno</th>
      <th>name</th>
      <th>id</th>
      <th>language</th>
      <th>state</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Some Name</td>
      <td>ID#1</td>
      <td>English</td>
      <td>New York</td>
    </tr>
  </thead>
</table>

＆＃13;

＆＃13;

＆＃13;