雙擊table的td進(jìn)行編輯的案例分享

位置:首頁 / 新聞中心 / 知識教程

知識教程 Admin 2024-02-23 18:14:34 796
目前很多列表的編輯功能,都是點(diǎn)擊單行編輯按鈕,然后進(jìn)行單條的跳轉(zhuǎn)或者彈窗編輯,數(shù)量少還可以,數(shù)據(jù)比較大,改動(dòng)比較多的話,這樣效率就是災(zāi)難性的。如過能雙擊某個(gè)單元格即可進(jìn)行編輯,這樣帶來的效率提升是非常大的,實(shí)現(xiàn)如下:

$('#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:是從當(dāng)前元素開始,沿Dom樹向上遍歷直到找到已應(yīng)用選擇器的一個(gè)匹配為止。
        $(this).closest('td').text(oldVal);
    });
});
 
 
   
       
   
姓名語文數(shù)學(xué)英語合計(jì)

以上就是“雙擊table的td進(jìn)行編輯的案例分享”的詳細(xì)內(nèi)容,更多請關(guān)注木子天禾科技其它相關(guān)文章!

以上就是“雙擊table的td進(jìn)行編輯的案例分享”的詳細(xì)內(nèi)容,更多請關(guān)注木子天禾科技其它相關(guān)文章!

15934152105 掃描微信