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>