目前很多列表的編輯功能,都是點擊單行編輯按鈕,然后進行單條的跳轉(zhuǎn)或者彈窗編輯,數(shù)量少還可以,數(shù)據(jù)比較大,改動比較多的話,這樣效率就是災(zāi)難性的。如過能雙擊某個單元格即可進行編輯,這樣帶來的效率提升是非常大的,實現(xiàn)如下:
$('#tb_list').on('dblclick', 'td', function () {
$('#tb_list').on('dblclick', 'td', function () {
var oldVal = $(this).text();
var input = "";
$(this).text('');
$(this).append(input);
$('#tmpId').focus();
$('#tmpId').blur(function(){
if($(this).val() != ''){
oldVal = $(this).val();
}
//closest:是從當前元素開始,沿Dom樹向上遍歷直到找到已應(yīng)用選擇器的一個匹配為止。
$(this).closest('td').text(oldVal);
});
});
姓名 | 語文 | 數(shù)學(xué) | 英語 | 合計 |
---|
以上就是“雙擊table的td進行編輯的案例分享”的詳細內(nèi)容,更多請關(guān)注木子天禾科技其它相關(guān)文章!