限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 丰富的输入

jquery+PureCSS的可编辑表格插件

所属分类： 网页特效-丰富的输入    2024-12-13 11:04:24

 5.2K  0  查看评论 (0)
jquery+PureCSS的可编辑表格插件 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

jquery+PureCSS的可编辑表格插件（共4个文件）

    • index.html

使用方法

  • code
  • source
  1. /*global $, window*/

  2. $.fn.editableTableWidget = function (options) {

  3.     'use strict';

  4.     return $(this).each(function () {

  5.         var buildDefaultOptions = function () {

  6.                 var opts = $.extend({}, $.fn.editableTableWidget.defaultOptions);

  7.                 opts.editor = opts.editor.clone();

  8.                 return opts;

  9.             },

  10.             activeOptions = $.extend(buildDefaultOptions(), options),

  11.             ARROW_LEFT = 37, ARROW_UP = 38, ARROW_RIGHT = 39, ARROW_DOWN = 40, ENTER = 13, ESC = 27, TAB = 9,

  12.             element = $(this),

  13.             editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()),

  14.             active,

  15.             showEditor = function (select) {

  16.                 active = element.find('td:focus');

  17.                 if (active.length) {

  18.                     editor.val(active.text())

  19.                         .removeClass('error')

  20.                         .show()

  21.                         .offset(active.offset())

  22.                         .css(active.css(activeOptions.cloneProperties))

  23.                         .width(active.width())

  24.                         .height(active.height())

  25.                         .focus();

  26.                     if (select) {

  27.                         editor.select();

  28.                     }

  29.                 }

  30.             },

  31.             setActiveText = function () {

  32.                 var text = editor.val(),

  33.                     evt = $.Event('change'),

  34.                     originalContent;

  35.                 if (active.text() === text || editor.hasClass('error')) {

  36.                     return true;

  37.                 }

  38.                 originalContent = active.html();

  39.                 active.text(text).trigger(evt, text);

  40.                 if (evt.result === false) {

  41.                     active.html(originalContent);

  42.                 }

  43.             },

  44.             movement = function (element, keycode) {

  45.                 if (keycode === ARROW_RIGHT) {

  46.                     return element.next('td');

  47.                 } else if (keycode === ARROW_LEFT) {

  48.                     return element.prev('td');

  49.                 } else if (keycode === ARROW_UP) {

  50.                     return element.parent().prev().children().eq(element.index());

  51.                 } else if (keycode === ARROW_DOWN) {

  52.                     return element.parent().next().children().eq(element.index());

  53.                 }

  54.                 return [];

  55.             };

  56.         editor.blur(function () {

  57.             setActiveText();

  58.             editor.hide();

  59.         }).keydown(function (e) {

  60.             if (e.which === ENTER) {

  61.                 setActiveText();

  62.                 editor.hide();

  63.                 active.focus();

  64.                 e.preventDefault();

  65.                 e.stopPropagation();

  66.             } else if (e.which === ESC) {

  67.                 editor.val(active.text());

  68.                 e.preventDefault();

  69.                 e.stopPropagation();

  70.                 editor.hide();

  71.                 active.focus();

  72.             } else if (e.which === TAB) {

  73.                 active.focus();

  74.             } else if (this.selectionEnd - this.selectionStart === this.value.length) {

  75.                 var possibleMove = movement(active, e.which);

  76.                 if (possibleMove.length > 0) {

  77.                     possibleMove.focus();

  78.                     e.preventDefault();

  79.                     e.stopPropagation();

  80.                 }

  81.             }

  82.         })

  83.         .on('input paste', function () {

  84.             var evt = $.Event('validate');

  85.             active.trigger(evt, editor.val());

  86.             if (evt.result === false) {

  87.                 editor.addClass('error');

  88.             } else {

  89.                 editor.removeClass('error');

  90.             }

  91.         });

  92.         element.on('click keypress dblclick', showEditor)

  93.         .css('cursor', 'pointer')

  94.         .keydown(function (e) {

  95.             var prevent = true,

  96.                 possibleMove = movement($(e.target), e.which);

  97.             if (possibleMove.length > 0) {

  98.                 possibleMove.focus();

  99.             } else if (e.which === ENTER) {

  100.                 showEditor(false);

  101.             } else if (e.which === 17 || e.which === 91 || e.which === 93) {

  102.                 showEditor(true);

  103.                 prevent = false;

  104.             } else {

  105.                 prevent = false;

  106.             }

  107.             if (prevent) {

  108.                 e.stopPropagation();

  109.                 e.preventDefault();

  110.             }

  111.         });

  112. 

  113.         element.find('td').prop('tabindex', 1);

  114. 

  115.         $(window).on('resize', function () {

  116.             if (editor.is(':visible')) {

  117.                 editor.offset(active.offset())

  118.                 .width(active.width())

  119.                 .height(active.height());

  120.             }

  121.         });

  122.     });

  123. 

  124. };

  125. $.fn.editableTableWidget.defaultOptions = {

  126.     cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',

  127.                       'text-align', 'font', 'font-size', 'font-family', 'font-weight',

  128.                       'border', 'border-top', 'border-bottom', 'border-left', 'border-right'],

  129.     editor: $('<input>')

  130. };

  131. 

/*global $, window*/
$.fn.editableTableWidget = function (options) {
    'use strict';
    return $(this).each(function () {
        var buildDefaultOptions = function () {
                var opts = $.extend({}, $.fn.editableTableWidget.defaultOptions);
                opts.editor = opts.editor.clone();
                return opts;
            },
            activeOptions = $.extend(buildDefaultOptions(), options),
            ARROW_LEFT = 37, ARROW_UP = 38, ARROW_RIGHT = 39, ARROW_DOWN = 40, ENTER = 13, ESC = 27, TAB = 9,
            element = $(this),
            editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()),
            active,
            showEditor = function (select) {
                active = element.find('td:focus');
                if (active.length) {
                    editor.val(active.text())
                        .removeClass('error')
                        .show()
                        .offset(active.offset())
                        .css(active.css(activeOptions.cloneProperties))
                        .width(active.width())
                        .height(active.height())
                        .focus();
                    if (select) {
                        editor.select();
                    }
                }
            },
            setActiveText = function () {
                var text = editor.val(),
                    evt = $.Event('change'),
                    originalContent;
                if (active.text() === text || editor.hasClass('error')) {
                    return true;
                }
                originalContent = active.html();
                active.text(text).trigger(evt, text);
                if (evt.result === false) {
                    active.html(originalContent);
                }
            },
            movement = function (element, keycode) {
                if (keycode === ARROW_RIGHT) {
                    return element.next('td');
                } else if (keycode === ARROW_LEFT) {
                    return element.prev('td');
                } else if (keycode === ARROW_UP) {
                    return element.parent().prev().children().eq(element.index());
                } else if (keycode === ARROW_DOWN) {
                    return element.parent().next().children().eq(element.index());
                }
                return [];
            };
        editor.blur(function () {
            setActiveText();
            editor.hide();
        }).keydown(function (e) {
            if (e.which === ENTER) {
                setActiveText();
                editor.hide();
                active.focus();
                e.preventDefault();
                e.stopPropagation();
            } else if (e.which === ESC) {
                editor.val(active.text());
                e.preventDefault();
                e.stopPropagation();
                editor.hide();
                active.focus();
            } else if (e.which === TAB) {
                active.focus();
            } else if (this.selectionEnd - this.selectionStart === this.value.length) {
                var possibleMove = movement(active, e.which);
                if (possibleMove.length > 0) {
                    possibleMove.focus();
                    e.preventDefault();
                    e.stopPropagation();
                }
            }
        })
        .on('input paste', function () {
            var evt = $.Event('validate');
            active.trigger(evt, editor.val());
            if (evt.result === false) {
                editor.addClass('error');
            } else {
                editor.removeClass('error');
            }
        });
        element.on('click keypress dblclick', showEditor)
        .css('cursor', 'pointer')
        .keydown(function (e) {
            var prevent = true,
                possibleMove = movement($(e.target), e.which);
            if (possibleMove.length > 0) {
                possibleMove.focus();
            } else if (e.which === ENTER) {
                showEditor(false);
            } else if (e.which === 17 || e.which === 91 || e.which === 93) {
                showEditor(true);
                prevent = false;
            } else {
                prevent = false;
            }
            if (prevent) {
                e.stopPropagation();
                e.preventDefault();
            }
        });

        element.find('td').prop('tabindex', 1);

        $(window).on('resize', function () {
            if (editor.is(':visible')) {
                editor.offset(active.offset())
                .width(active.width())
                .height(active.height());
            }
        });
    });

};
$.fn.editableTableWidget.defaultOptions = {
    cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
                      'text-align', 'font', 'font-size', 'font-family', 'font-weight',
                      'border', 'border-top', 'border-bottom', 'border-left', 'border-right'],
    editor: $('<input>')
};

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： 表格编辑快速编辑purecss
相关资源 / 丰富的输入
查看更多

jquery轻量级选择下拉菜单赋值到DIV插件

 一款超小的点选下拉框赋值插件，点选元素展开下拉菜单，鼠标点选后，自动将value值赋值到当前DIV中显示。
  丰富的输入
 4553  0

jquery带上下翻滚动画数字滑块插件

 一款动画数字滑块插件，鼠标可拖动水平进度条，可触发数字翻动、翻滚动画效果。
  丰富的输入
 6187  0

jquery支持插入表情的textarea插件

 一款让文本框或可编辑div具备插入表情特效， 表情图片支持分组，tab选项卡切换，点击表情图片可插入到文本框。
  丰富的输入
 6229  0

所见即所得轻量级WYSIWYG编辑器

 该文本编辑器API丰富灵活，可自定义的变量参数众多，小巧轻量级！
  丰富的输入
 4391  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论，快来抢个沙发！
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论