[基础学习]JS实现表格的增删改查

主题

<main>
        <h4>Js 面向对象 动态添加标签页</h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive">
                        <span>测试1</span><span class="iconfont icon-guanbi"></span>
                    </li>
                    <li>
                        <span>测试2</span><span class="iconfont icon-guanbi"></span>
                    </li>
                    <li>
                        <span>测试3</span><span class="iconfont icon-guanbi"></span>
                    </li>
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>

            <!-- tab 内容 -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>

获取元素

    var add = document.querySelector('.tabadd')
    var lisFather = document.querySelector('.fisrstnav ul:first-child')
    var sectionsFather = document.querySelector('.tabscon')

初始化绑定事件

    //初始化绑定事件
    function init() {
        updateNode()
        add.onclick = addTab//添加按钮

        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i//给每一个小li添加index 可以和section双向绑定

            lis[i].onclick = toggleTab//点击切换按钮
            remove[i].onclick = removeTab
            spans[i].ondblclick = editTab
            sections[i].ondblclick = editTab
        }


    }

动态添加元素

    //我们动态添加元素，删除元素时，需要从新获取对应的元素
    function updateNode() {


        lis = document.querySelectorAll('li')
        sections = document.querySelectorAll('section')
        remove = document.querySelectorAll('.iconfont')
        spans = document.querySelectorAll('.fisrstnav li span:first-child')

    }

样式清除

   //清除样式
    function clearClass() {
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = ''
            sections[i].className = ''
        }
    }

切换

   //切换
    function toggleTab() {

        clearClass()
        this.className = 'liactive'
        sections[this.index].className = 'conactive'

    }

添加

    //添加
    function addTab() {
        clearClass()

        var random = parseInt(10 * Math.random())

        var li = `<li class="liactive"><span>测试${random}</span><span class="iconfont icon-guanbi"></span></li>`
        lisFather.insertAdjacentHTML('beforeend', li)
        var section = `<section class="conactive">测试${random}</section>`
        sectionsFather.insertAdjacentHTML('beforeend', section)

        init()
    }

删除

    //删除
    function removeTab(e) {
        //获取父亲的parentNode
        e.stopPropagation()
        var index = this.parentNode.index;
        console.log(index);
        lis[index].remove()
        sections[index].remove()
        init()


        index--


        lis[index] ? lis[index].click() : alert('没有了哦表格')


    }

编辑

   //编辑表格
    function editTab() {
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()

        var str = this.innerHTML
        this.innerHTML = `<input type='text' value=${str}/>`
        var input = this.children[0]
        input.select()
        input.onblur = function () {
            input.parentNode.innerHTML = input.value
        }

        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                this.blur()
            }
        }

    }

css样式