前端table表格箭头上下移动

最新推荐文章于 2023-03-11 08:45:30 发布

weixin_48484941

最新推荐文章于 2023-03-11 08:45:30 发布

阅读量1.1k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_48484941/article/details/108198651

版权

因业务需求，需要按上下移动箭头来使得光标上下移动。且表格是不规则的，存在单元格合并（横向，纵向都有）且并非所有的单元格都是input框。故使得功能开发出来比较麻烦。

/**
     * 获取单元格在表格中的绝对位置
     * @param td
     * @returns {number}
     */
    function getTdOfTableLocation(td) {
        let colCount=0;
        td.prevAll("td").each(function (i,obj) {
                colCount += obj.colSpan;
        });
        let tr = td.closest("tr");
        let deep = 1;
        while (tr.prev("tr").length > 0){
            let tempCount = colCount;
            tr = tr.prev("tr");
            deep++;
            tr.find("td").each(function (i,obj) {
                if(obj.rowSpan >= deep){
                    colCount+= obj.colSpan;
                }else{
                    tempCount -= obj.colSpan;
                }
                if(tempCount < 0){
                    return false;
                }
            })
        }
        return colCount;
    }

//监听回车事件
        document.onkeydown=function(e) {
            if(e.keyCode == 40){
                if($(e.target).closest("#tableId").length > 0){
                    let rowSpan = $(e.target).closest("td")[0].rowSpan;
                    let index = rowSpan - 1;
                    let colCount = getTdOfTableLocation($(e.target).closest("td"));
                    $(e.target).closest("tr").nextAll("tr:eq("+index+")").find("td").each(function (i,obj) {
                        if(colCount == getTdOfTableLocation($(obj))){
                            $(obj).find("input").focus();
                            return false;
                        }

                    })
                }
                return false;
            }else if(e.keyCode == 38){
                if($(e.target).closest("#tableId").length > 0){
                    let rowSpan = $(e.target).closest("td")[0].rowSpan;
                    let index = rowSpan - 1;
                    let colCount=getTdOfTableLocation($(e.target).closest("td"));
                    $(e.target).closest("tr").prevAll("tr:eq("+index+")").find("td").each(function (i,obj) {
                        if(colCount == getTdOfTableLocation($(obj))){
                            $(obj).find("input").focus();
                            return false;
                        }
                    })
                }
                return false;
            }
        }