jQuery addClass example

Change class name on click in jQuery

by Kris

HTML

<div class="box">
        <div class="hbox" id="header">
            <div class="item">
                <button class="showTool">x</button>
                <div class="hoverBox">
                    <button class="concat">[]</button>
                    <button class="remove">-</button>
                    <button class="plus">+</button>
                </div>
            </div>
            <div class="dragLine"></div>
            <div class="item">
                <button class="showTool">x</button>
                <div class="hoverBox">
                    <button class="concat">[]</button>
                    <button class="remove">-</button>
                    <button class="plus">+</button>
                </div>
            </div>
            <div class="dragLine"></div>
            <div class="item">
                <button class="showTool">x</button>
                <div class="hoverBox">
                    <button class="concat">[]</button>
                    <button class="remove">-</button>
                    <button class="plus">+</button>
                </div>
            </div>
            <div class="dragLine"></div>
            <div class="item">
                <button class="showTool">x</button>
                <div class="hoverBox">
                    <button class="concat">[]</button>
                    <button class="remove">-</button>
                    <button class="plus">+</button>
                </div>
            </div>
            <div class="dragLine"></div>

        </div>
        <div class="left">
            <div class="item">
                <button>x</button>
            </div>
            <div class="dragLine"></div>
            <div class="item">
                <button>x</button>
            </div>
            <div class="dragLine"></div>
        </div>
        <table id="kt" contenteditable="true">
                <tr>
                    <td rowspan="1" style="width:100px; height:25px"> header</td>
                ...

CSS

body, html{
        height:100%;
        width:100%;
    }
    .box{
        position: relative;
        height:100%;
        width:100%;
        padding: 100px;
        text-align: center;
    }

    .hbox .item{
        float:left;
        width:102px;
        border-top:1px solid red;
        border-collapse: collapse;
        height:30px;
        margin-left: -1px;
        position: relative;
    }
    .hbox .item .hoverBox{
        position: absolute;
        width:100px;
        left:0px;
        top:-40px;
        display: none;
    }
    .hbox .dragLine{
        height:31px;
        float: left;
        width: 1px;
        border-left: 1px solid red;
        cursor: move;
    }
    .left .item{
        width: 30px;
        border-collapse: collapse;
        height:26px;
        margin-left: -1px;
        vertical-align: center;
        position: relative;
    }
    .left .dragLine{
        height: 1px;
        width: 31px;
        border-bottom: 1px solid red;
        cursor: move;
    }
    .hbox{
        position:absolute;
        top:50px;
        left:100px;
        border-bottom:1px solid red;
        border-left:1px solid red;
    }
    .left{
        position:absolute;
        border-left: 1px solid red;
        border-right: 1px solid red;
        border-top: 1px solid red;
        width:30px;
        top:100px;
        left:50px;
    }
    table{
        border-left:1px solid blue;
        border-top:1px solid blue;
        border-collapse: collapse;
    }
    table td{
        border-right:1px solid blue;
        border-bottom:1px solid blue;
    }

    table td.hover{
        background: bisque;
    }
    table td.del{
        background: indianred!important;
    }

JavaScript

$(document).on({
        mouseup: function(e){
            $(document).off('mousemove.drag');
            $('.hoverBox').hide()
            $('.hover').removeClass('hover')

        }
    })
    $(".hbox").on({
        mousedown: function(e){
            var el=$(this);
            let itemLen = $('.hbox .item').length
            let index = (el.index() - 1) / 2
            let elBox = $(`.hbox .item:eq(${index})`)
            let elTd = $(`table td:eq(${index})`)
            let elTd1 = $(`table td:eq(${index+1})`)
            let elBox1 = $(`.hbox .item:eq(${index + 1})`)
            let dx =  e.pageX - elBox.width()
            let dx1 = -e.pageX - elBox1.width()
            $(document).on('mousemove.drag', function(e){
                if (index < itemLen - 1) {
                    let width = e.pageX - dx
                    let width1 = -e.pageX - dx1
                    if (width1 < 20 || width < 20) {
                        return
                    }
                    elBox.width(width)

                    elBox1.width(width1)

                    $(`table tr`).each(function(n, tr){
                        $(`td:eq(${index})`, $(tr)).width(width - 2)
                        $(`td:eq(${index+1})`, $(tr)).width(width1 - 2)
                    })
                } else {
                    let width = e.pageX - dx
                    if (width < 20) {
                        return
                    }
                    elBox.width(width)
                    $(`table tr`).each(function(n, tr){
                        $(`td:eq(${index})`, $(tr)).width(width - 2)
                    })
                }
            });
        },

        mouseup: function(e){
            $(document).off('mousemove.drag');
        }
    },'.dragLine');
    $(".left").on({
        mousedown: function(e){
            var el=$(this);
            let itemLen = $('.hbox .item').length
            let index = (el.index() - 1) / 2
            let elBox = $(`.left...