欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery实现双击改变table中的值(代码实现教程)

程序员文章站 2023-11-09 08:52:58
思想: 1、监听table中td的双击事件 2、把当前点击的tr变成一个input,且把鼠标焦点放在其上 3、当鼠标焦点不在时,判断值是否为空,空值时原来的值不发生改变,不为空,当前的td值变成刚刚...

思想:

1、监听table中td的双击事件

2、把当前点击的tr变成一个input,且把鼠标焦点放在其上

3、当鼠标焦点不在时,判断值是否为空,空值时原来的值不发生改变,不为空,当前的td值变成刚刚输入的值

$(function(){  
  $('#tableid').on('dblclick','td',function(){  
    var oldval = $(this).text;  
    var input = "<input type="text" id="tempid" value='"+oldval+"'>";  
    $(this).text('');  
    $(this).append(input);  
    $('#tempid').focus();  
    $('#tempid').blur(function(){  
       if($(this).val()!=''){  
         oldval = $(this).val();  
       }  
    $(this).closest('td').text(oldval);  
  })  
})  
})  

如何选择器中想要排除某行td 可以在td中利用选择器中排除对应的项,例如用类选择器 排除class="except"的类

$('#tableid').on('dblclick','td:not(.except)',function(){}