html表格内容的jquery-inline编辑

Question

在此表中，onclick 我想让完整的行可编辑。但是使用下面的代码一次只能编辑单元格。即，当我单击该行时，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 ，并再次运行处理程序。

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

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