JS区域选择功能实现_js实现在线勾选区域-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_22936647/article/details/137071901

本文介绍了如何使用JavaScript在HTML页面中的表格上实现鼠标拖拽选择功能，包括事件监听、位置计算和元素操作，以便动态改变选中单元格的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<style>

</style>

<body>

    <table id="table" border="1" style="width: 300px; height: 200px;">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
    </table>



</body>

</html>
<script>
    class copy {
        set = new Set()
        tableMD = false
        tableDom = null
        range = 2
        position = {
            beginX: 0,
            beginY: 0,
            endX: 0,
            endY: 0,
            computedX: 0,
            computedY: 0
        }
        constructor(dom = null) {
            this.tableDom = document.getElementById("table")
            this.registerEvent()
        }
        registerEvent() {
            const t = this;
            this.tableDom.addEventListener("mousedown", (e) => {
                event.preventDefault()
                t.cancelSelect()
                t.tableMD = true
                t.position.beginX = e.pageX
                t.position.beginY = e.pageY
                t.position.computedX = e.pageX
                t.position.computedY = e.pageY
            })
            t.tableDom.onmousemove = (e) => {
                event.preventDefault()
                t.position.endX = e.pageX
                t.position.endY = e.pageY
                t.position.computedX = t.position.beginX
                t.position.computedY = t.position.beginY
                if (t.tableMD) {
                    t.cancelSelect()
                    t.moveHandle(e)
                }
            }
            document.onmouseup = (e) => {
                const t = this
                t.tableMD = false
            }
        }
        moveHandle(e) {
            const t = this;
            const a = () => {
                t.position.computedX = t.position.beginX
                if (t.position.endY < t.position.beginY) {
                    t.position.computedY += (0 - t.range)
                    if (t.position.computedY < t.position.endY) { return false; }
                } else {
                    t.position.computedY += t.range
                    if (t.position.computedY > t.position.endY) { return false; }
                }
                return true
            }
            if (t.position.beginX > e.pageX) {
                // 左滑
                t.position.computedX += (0 - t.range)
                if (t.position.computedX > t.position.endX) {
                    t.addSet(t.position.computedX, t.position.computedY)
                    t.moveHandle(e)
                } else {
                    a() && t.moveHandle(e)
                }
            } else {
                // 右滑
                t.position.computedX += t.range
                if (t.position.computedX < t.position.endX) {
                    t.addSet(t.position.computedX, t.position.computedY)
                    t.moveHandle(e)
                } else {
                    a() && t.moveHandle(e)
                }
            }
        }
        cancelSelect = () => {
            const t = this;
            t.set.forEach(item => {
                item.style.background = "none"
            })
            t.set.clear()
        }
        addSet = (x, y) => {
            const t = this;
            var element = document.elementFromPoint(x, y)
            if (element.nodeName === "TD") {
                t.set.add(element)
                element.style.background = "red"
            }
        }
    }


    window.onload = function () {
        new copy().registerEvent()
    }

</script>