jquery实现双击table表格后可编辑内容的方法及在线实例演示亲测 原创

文章标签: jquery table
  • :
  • 06-22 14:57
  • :
  • 203次
  • :
  • 0条
  • 2赞

简介用jquery实现双击网页里的表格后,可以对表格内容进行编辑的方法和完整的在线实例演示。l

本文站长和大家分享一个jquery里操作table表格的特效实例,在鼠标双击表格里的td单元格后,可以进行编辑的方法特效。

下面是具体的juqery代码:

$('table#aijquery').on("dblclick","td",function(){
    var $td=$(this);    //获取被双击的td单元格
    var _t=$td.text();  //被双击的td单元格里的文本内容
    var _w=$td.width(); //被双击的td单元格的宽度
    var _h=$td.height(); //被双击的td单元格的高度
    $td.html("");        //清空被双击的td单元格里的内容
    var $input=$("<input type='text'>");//设置一个待添加的input表单
    //下面这句是把input表单添加到被双击的单元格里,
    //并设置好input表单的宽高,并让其获取焦点,并设置在失去焦点事的动作
    $input.appendTo($td).width(_w).height(_h).val(_t).focus().blur(function(){
        //失去焦点时,把input的值赋给td单元格
        $td.html($(this).val());
    });
});


上面的代码里,站长备注的非常清楚,下面是完整的在线实例演示:

jquery双击表格可进行编辑的在线实例演示



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 15:43:43