表格操作eventTable

最新推荐文章于 2024-02-06 11:26:24 发布
最新推荐文章于 2024-02-06 11:26:24 发布
阅读量446 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/heyinwangchuan/p/6347901.html
版权

---注意这里的demo中的css在这里被禁止了，出不出来，可以粘贴到本地运行查看情况---

实现效果demo

<button id="delect">删除</button> <button id="up">上移一行</button> <button id="down">下移一行</button><table id="gridview3"><tr><th>ID</th><th>Name</th><th>Gender</th><th>Birthday</th></tr><tr><td>1</td><td>刘德华</td><td>男</td><td>1985/1/1</td></tr><tr><td>2</td><td>刘若英</td><td>女</td><td>1987/3/1</td></tr><tr><td>3</td><td>张韶涵</td><td>女</td><td>1987/1/2</td></tr><tr><td>4</td><td>周杰伦</td><td>男</td><td>1982/5/12</td></tr></table><script type="text/javascript"> /** * Created by lenovo on 2017/1/24. */ /* * id:��ǰ�������id * hiddenRowArr����ʾҲ���ص��е�arr * selectMore:true||falseĬ��ֵΪfalse * */ function eventTable(id, hiddenRowArr, selectMore) { var self = this; this.id = document.getElementById(id); this.hiddenRowArr = hiddenRowArr || null; this.selectMore = selectMore || false; if (this.id) { this.onselectstart = function () { return false }; this._init(this.id); } } eventTable.prototype = { _init: function (id) { this._formatTable(id); id.className = "eventTable"; this.attachEvent(); this._format(); }, _formatTable: function (tableObject, border, cellSpacing, cellPadding, align) { if (border == null && isNaN(parseInt(border))) { border = 0; } else { border = parseInt(border); } if (cellSpacing == null && isNaN(parseInt(cellSpacing))) { cellSpacing = 0 } else { cellSpacing = parseInt(cellSpacing); } if (cellPadding == null && isNaN(parseInt(cellPadding))) { cellPadding = 0 } else { cellPadding = parseInt(cellPadding); } tableObject.border = border; tableObject.cellPadding = cellSpacing; tableObject.cellSpacing = cellPadding; if (align) tableObject.align = align; }, _format: function () { var self=this; var rowCount = this.id.rows.length; var tbHead = this.id.rows[0]; var cellCount = null; if (0 in tbHead.cells) { if (tbHead.cells[0].tagName.toUpperCase() == "TH") { } } for (var i = 1; i < rowCount; i++) { if (cellCount == null) { cellCount = this.id.rows[i].cells.length; } for (var cell = 0; cell < cellCount; cell++) { if (this.id.rows[i].cells[cell].className.indexOf('item-')>-1){ this.id.rows[i].cells[cell].className=this.id.rows[i].cells[cell].className.replace(/item-\d/,'item-' + ((i + 1) % 2)); }else this.id.rows[i].cells[cell].className = 'item-' + ((i + 1) % 2); } } }, //event attachEvent: function (event) { var self = this; var event = window.event || event; var rows = this.id.rows; var rowlength = rows.length; for (var i = 0; i < rowlength; i++) { rows[i].onclick = function () { self.selectRow(this) } rows[i].ondblclick = function () { self.DbClick(this) } } }, DbClick: function (row) { alert(111); }, Eclick: function () { return true }, selectRow: function (row) { var self = this; if (this.selectMore) { if (!this.RowArr) { this.RowArr = [] } if (this.judgeTrExit(row)) { this.RowArr.push(row); } if (this.RowArr.length == 0) { this.RowArr.push(row); } for (var i = 0, l = row.cells.length; i < l; i++) { if (row.cells[i].className.indexOf("selected") > -1) { row.cells[i].className = row.cells[i].className; } else { row.cells[i].className = 'selected ' + row.cells[i].className; } } } else { this.RowArr = []; this.RowArr.push(row); for (var rows = 1, rowsl = this.id.rows.length; rows < rowsl; rows++) { for (var cells = 0, cellsL = this.id.rows[rows].cells.length; cells < cellsL; cells++) { self.delectClass(self.id.rows[rows].cells[cells], "selected") } } for (var i = 0, l = row.cells.length; i < l; i++) { if (row.cells[i].className.indexOf("selected") > -1) { row.cells[i].className = row.cells[i].className; } else { row.cells[i].className = 'selected ' + row.cells[i].className; } } } }, judgeTrExit: function (row) { for (var j = 0; j < this.RowArr.length; j++) { if (this.RowArr[j].rowIndex == row.rowIndex) { return false; } } return true }, delectClass: function (el, css) { var attr = ""; var classNames = el.className.split(/\s+/); for (var i = 0, l = classNames.length; i < l; i++) { if (classNames[i]) { if (!(css == classNames[i])) { attr += classNames[i] + " "; } } } el.className = attr; }, operateRow: function (canshu) { // switch (canshu) { case "up": this.upRow(); break; case "down": this.downRow(); break; case "delectRow": this.decectRow(); } }, upRow: function () { var row = this.RowArr[0]; var rowIndex=row.rowIndex; var newCell,tempCell; if (rowIndex>=2){ var newTr=this.id.insertRow(rowIndex-1); for (var i=0;i<row.cells.length;i++){ newCell= newTr.insertCell(i); newCell.innerHTML = row.cells[i].innerHTML; newCell.className=row.cells[i].className; } this.id.deleteRow(rowIndex+1); this.RowArr[0]=newTr; this._format(); this.attachEvent(); } }, decectRow: function () { var row = this.RowArr[0]; this.id.deleteRow(row.rowIndex); this._format(); }, downRow: function () { var row = this.RowArr[0]; var rowIndex=row.rowIndex; var newCell,tempCell; if (rowIndex+2<=this.id.rows.length){ var newTr=this.id.insertRow(rowIndex+2); for (var i=0;i<row.cells.length;i++){ newCell= newTr.insertCell(i); newCell.innerHTML = row.cells[i].innerHTML; newCell.className=row.cells[i].className; } this.id.deleteRow(rowIndex); this.RowArr[0]=newTr; this.attachEvent(); this._format(); } } } </script><script type="text/javascript"> window.οnlοad=function(){ var bbb=new eventTable('gridview3'); document.getElementById('delect').οnclick=function(){ bbb.operateRow('delectRow') } document.getElementById('down').οnclick=function(){ bbb.operateRow('down') } document.getElementById('up').οnclick=function(){ bbb.operateRow('up') } } </script>运行

/**
/**
 * Created by lenovo on 2017/1/24.
 */
/*
 * id:表格的id
 * hiddenRowArr：arr
 * selectMore:true||false||默认为false
 * */
function eventTable(id, hiddenRowArr, selectMore) {
    var self = this;
    this.id = document.getElementById(id);
    this.hiddenRowArr = hiddenRowArr || null;
    this.selectMore = selectMore || false;
    if (this.id) {
        this.onselectstart = function () {
            return false
        };
        this._init(this.id);
    }
}
eventTable.prototype = {
    _init: function (id) {
        this._formatTable(id);
        id.className = "eventTable";
        this.attachEvent();
        this._format();
    },
    _formatTable: function (tableObject, border, cellSpacing, cellPadding, align) {
        if (border == null && isNaN(parseInt(border))) {
            border = 0;
        } else {
            border = parseInt(border);
        }
        if (cellSpacing == null && isNaN(parseInt(cellSpacing))) {
            cellSpacing = 0
        } else {
            cellSpacing = parseInt(cellSpacing);
        }
        if (cellPadding == null && isNaN(parseInt(cellPadding))) {
            cellPadding = 0
        } else {
            cellPadding = parseInt(cellPadding);
        }
        tableObject.border = border;
        tableObject.cellPadding = cellSpacing;
        tableObject.cellSpacing = cellPadding;
        if (align)
            tableObject.align = align;
    },
    _format: function () {
        var self=this;
        var rowCount = this.id.rows.length;
        var tbHead = this.id.rows[0];
        var cellCount = null;
        if (0 in tbHead.cells) {
            if (tbHead.cells[0].tagName.toUpperCase() == "TH") {
            }
        }
        for (var i = 1; i < rowCount; i++) {
            if (cellCount == null) {
                cellCount = this.id.rows[i].cells.length;
            }
            for (var cell = 0; cell < cellCount; cell++) {
                if (this.id.rows[i].cells[cell].className.indexOf('item-')>-1){
                    this.id.rows[i].cells[cell].className=this.id.rows[i].cells[cell].className.replace(/item-\d/,'item-' + ((i + 1) % 2));
                }else
                this.id.rows[i].cells[cell].className = 'item-' + ((i + 1) % 2);
            }
        }
    },
    //event
    attachEvent: function (event) {
        var self = this;
        var event = window.event || event;
        var rows = this.id.rows;
        var rowlength = rows.length;
        for (var i = 0; i < rowlength; i++) {
            rows[i].onclick = function () {
                self.selectRow(this)
            }
            rows[i].ondblclick = function () {
                self.DbClick(this)
            }
        }

    },
    DbClick: function (row) {
        alert(111);
    },
    Eclick: function () {
        return true
    },
    selectRow: function (row) {
        var self = this;
        if (this.selectMore) {
            if (!this.RowArr) {
                this.RowArr = []
            }
            if (this.judgeTrExit(row)) {
                this.RowArr.push(row);
            }

            if (this.RowArr.length == 0) {
                this.RowArr.push(row);
            }
            for (var i = 0, l = row.cells.length; i < l; i++) {
                if (row.cells[i].className.indexOf("selected") > -1) {
                    row.cells[i].className = row.cells[i].className;
                } else {
                    row.cells[i].className = 'selected ' + row.cells[i].className;
                }
            }
        }
        else {
            this.RowArr = [];
            this.RowArr.push(row);
            for (var rows = 1, rowsl = this.id.rows.length; rows < rowsl; rows++) {
                for (var cells = 0, cellsL = this.id.rows[rows].cells.length; cells < cellsL; cells++) {
                    self.delectClass(self.id.rows[rows].cells[cells], "selected")
                }

            }
            for (var i = 0, l = row.cells.length; i < l; i++) {
                if (row.cells[i].className.indexOf("selected") > -1) {
                    row.cells[i].className = row.cells[i].className;
                } else {
                    row.cells[i].className = 'selected ' + row.cells[i].className;
                }
            }

        }
    },
    judgeTrExit: function (row) {
        for (var j = 0; j < this.RowArr.length; j++) {
            if (this.RowArr[j].rowIndex == row.rowIndex) {
                return false;
            }
        }
        return true
    },
    delectClass: function (el, css) {
        var attr = "";
        var classNames = el.className.split(/\s+/);
        console.log(classNames)
        for (var i = 0, l = classNames.length; i < l; i++) {
            if (classNames[i]) {
                if (!(css == classNames[i])) {
                    attr += classNames[i] + " ";
                }
            }
        }
        console.log(attr)
        el.className = attr;

    },
    operateRow: function (canshu) {
        //
        switch (canshu) {
            case "up":
                this.upRow();
                break;
            case "down":
                this.downRow();
                break;
            case "delectRow":
                this.decectRow();
        }
    },
    upRow: function () {
        var row = this.RowArr[0];
        var rowIndex=row.rowIndex;
        var newCell,tempCell;
        if (rowIndex>=2){
            var newTr=this.id.insertRow(rowIndex-1);
            for (var i=0;i<row.cells.length;i++){
                newCell= newTr.insertCell(i);
                newCell.innerHTML = row.cells[i].innerHTML;
                newCell.className=row.cells[i].className;
                console.log(newCell.className);
            }
            this.id.deleteRow(rowIndex+1);
            this.RowArr[0]=newTr;
            this._format();
            this.attachEvent();
        }
    },
    decectRow: function () {
        var row = this.RowArr[0];
        this.id.deleteRow(row.rowIndex);
        this._format();

    },
    downRow: function () {
        var row = this.RowArr[0];
        var rowIndex=row.rowIndex;
        var newCell,tempCell;
        if (rowIndex+2<=this.id.rows.length){
            var newTr=this.id.insertRow(rowIndex+2);
            for (var i=0;i<row.cells.length;i++){
                newCell= newTr.insertCell(i);
                newCell.innerHTML = row.cells[i].innerHTML;
                newCell.className=row.cells[i].className;
            }
            this.id.deleteRow(rowIndex);
            this.RowArr[0]=newTr;
            this.attachEvent();
            this._format();
        }
    }
}

html

删除 
上移一行 
下移一行
IDNameGenderBirthday
1刘德华男1985/1/1
2刘若英女1987/3/1
3张韶涵女1987/1/2
4周杰伦男1982/5/12
window.οnlοad=function(){
       var bbb=new eventTable('gridview3');
        document.getElementById('delect').οnclick=function(){
            bbb.operateRow('delectRow')
        }
        document.getElementById('down').οnclick=function(){
            bbb.operateRow('down')
        }
        document.getElementById('up').οnclick=function(){
            bbb.operateRow('up')
        }

    }

转载于:https://www.cnblogs.com/heyinwangchuan/p/6347901.html

weixin_30362801
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+element获取el-table某行的下标,根据下标操作数组对象方式
11-20
1.在vue中对数组中的某个对象进行操作时（替换、删除），都需要用到该对象在数组中的下标。 前端代码： scope.$index ：获取当前行的下标 scope.row：获取当前行的对象 效果图： 思路：通过点击事件将该对象在数组...
js 事件循环机制
mushroomLNL的博客
07-08 109
js事件循环机制
宏任务和微任务
qq_39224645的博客
02-22 1906
javascript的宏任务和微任务 宏任务有Event Table、Event Queue，微任务有Event Queue 1.宏任务：包括整体代码script，setTimeout，setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)； 2.微任务：Promise、MutaionObserver、process.nextTick(Node.js 环境) 注：new Promise中的代码会立即执行，then函数分发到微任务队列，process.nextTick
捋一捋 JavaScript 事件循环机制
weixin_46015333的博客
10-13 587
本文从为什么 javascript 是单线程、异步任务产生的原因、什么是宏任务微任务、javascript 事件循环机制四步讲解，步步深入，最后还分析解答了我在学习过程中遇到的困惑，不信你不懂。
QTabletEvent-Qt-如何使用数字手写板，并捕获相关事件？
最新发布
插件开发
02-06 499
是处理来自图形平板设备输入的事件类。当用户使用数位板（如Wacom等品牌）与应用程序交互时，这些事件会被发送到相应的QWidget或其子类上。如果你想要在QWidget中捕获并响应来自数位板的输入，例如压力、倾斜角度、旋转信息或者精确笔触，你需要重载QWidget的相关事件处理函数来处理。函数会捕获所有类型的平板事件，并根据不同事件类型输出相关信息。你可以根据实际需求修改此函数以实现具体功能，比如绘画应用中的压力敏感绘图等功能。以下是一个简单的例子，在一个自定义的QWidget中处理。
Qt 关于mouseTracking鼠标追踪和tabletTracking平板追踪的几点官方说明
qq_40135848的博客
10-06 1285
Qt 关于mouseTracking鼠标追踪和tabletTracking平板追踪的几点官方说明
天涯易栈VC++网页操作类
07-27
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~以下为网页表格(table)~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ int GetTableCount();//返回网页内所有表格的数目 CString GetTableName(int i);//获取指定索引表格元素...
原创-javascript服务器交互型可编辑表格和我的js常用库
07-24
table : BaseJs.$("tabList"), // 从第几行第几列开始可编辑 start : [2, 2], // 到哪一行哪一列结束编辑 不写默认所有,写一个参数代表列,行不限 end : [], // 新增操作 addAction : { // ...
DataGridTree(asp.netmvc4.0)
06-25
做一些子节点汇总到根节点等操作 * 客户端新增特性配置说明 * 1.文本框 input 或 配置事件onchange='sumParent(this);' 数字改变相应所有父节点也随着改变 针对数字型 其他不支持 * 不过可以自定义js
Eclipse_Swt_Jface_核心应用_部分19
10-09
9.9 表格（Table、TableItem和TableColumn） 178 9.9.1 Table、TableItem和TableColumn的关系 182 9.9.2 设置带有选择框的表格 182 9.9.3 设置可同时选中多行表格 183 9.9.4 可拖动的表格 184 9.9.5 设置...
平板python_Wacom平板电脑的Python示例
weixin_39602569的博客
12-04 336
我这样做是为了我的WACOM Intoos艺术平板电脑：只需继承一个QWidget类并定义tabletEvent()方法来处理接收到的QTabletEvent事件。在别忘了打电话给平板电脑tabletEvent.accept()方法位于处理程序末尾。在示例：(处理TabletPress、tabletreease和TabletMove事件)当笔接触平板电脑表面时，生成TabletPress事件，当笔...
QT事件小归
听风雨
10-10 236
QT设计者，针对不同类型的事件，提供了不同的事件处理器来与之相对应。那么QT是怎么让不同的事件与之对应的事件处理器相关联的呢？我们不难猜想在事件和事件处理器中间必定有一个桥梁。这个桥梁就是QObject::event()函数，该函数是虚函数，QObject的子类例如QWidget都实现了该函数。该函数的主要功能是进行事件的分发，也就是将不同类型的事件与之相对应的事件处理器相关联，该函数并不...
java event loop_JavaScript-EventLoop-事件循环
weixin_39933713的博客
02-16 106
2020-01-11EventLoop-事件循环一、学习事件循环之前，先学习几个英语词组EventLoop 事件循环Event Queue 事件队列Event Table 事件表macro-task 宏任务micro-task 微任务二、再来一道事件机制的题console.log(1);setTimeout(() => {console.log(2);Promise.resolve().th...
Qt中事件处理的方法
chenlong12580的专栏
07-05 9993
一、Qt中事件处理的方式   1、事件处理模式一         首先是事件源产生事件，最后是事件处理器对这些事件进行处理。然而也许大家会问， Qt中有这么多类的事件，我们怎么样比较简便的处理每个事件呢？设想，如果是每个事件都对应同一个事件处理器，在该事件处理器中对不同的事件进行分类处理，这样的弊端有两点：第一，导致该事件处理器过于臃肿复杂；第二，这样不便于扩展，当系统新增加事件类型或
Qt中QEvent的accept和ignore函数 事件 （以QLabel事件重载为例）
吾生也有涯，而知也无涯
02-28 9462
Qt中QEvent的accept和ignore函数QApplication::notify() （用来发送一个事件）QObject::eventFilter() （用来过滤事件，即接收拦截别的对象的事件，并处理）QObject::event() （接收发送给自己这个对象的事件）Qt事件相关函数的两种通信方式：1、通过返回值；2、通过accept和ignore在Qt事件传递和接收相关的函数中，QAp...
【QT事件】大致了解一下QT中控件响应流程
我的代码管家---houwenbin的专栏
01-16 2336
首先，了解一下事件循环： http://blog.csdn.net/houwenbin1986/article/details/79078446 接着，来看看最简单的按钮的点击响应： 又是贴代码 //处理事件分发 void QWindowsGuiEventDispatcher::sendPostedEvents() { QEventDispatcherWin32::send
element-ui table组件中Table Events使用
莫不静好
04-10 4645
文章目录页面效果table组件设置hover时背景颜色一、直接修改css样式二、配合cell-mouse-enter cell-mouse-leave使用Table Events 使用说明实现methods中html中 页面效果 鼠标hover时显示当前行下可编辑的元素 table组件设置hover时背景颜色 一、直接修改css样式 .el-table .el-table__body tr:ho...
Table_map_log_event内容详解
老叶茶馆
03-28 1227
对Table_map_log_event格式和内容的详细介绍，By宋利兵老师
关于TableEvent进行注册表查询
yiyiqi123的博客
04-13 395
def main(args: Array[String]): Unit = { //创建批处理 val env = ExecutionEnvironment.getExecutionEnvironment //设置并行毒 env.setParallelism(1) //创建table的上下文环境对象 val tableenv = TableEnvironment.getTableEnvironme...
pysimplegui table表格
06-28
使用pysimplegui创建table表格非常简单，只需要定义表格的列和行，然后将数据填充到表格中即可。同时，pysimplegui还提供了丰富的样式和事件处理功能，可以满足不同的需求。 回答2：</h3><br/>pysimplegui是一种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值