jQuery在线编辑html表格内容

Question

在这张表中onclick我想做出完整的行editable.but与下面的代码能够编辑只有一个时间单元格，当我点击行，完整的单元格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

您需要设置所有的兄弟阵的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>