javaScript中table表任意复制一行怎么实现JS

JavaScript010

javaScript中table表任意复制一行怎么实现JS,第1张

table表任意复制一行的关键是复制哪行，插入到什么位置，如何插入。第 一个问题复制哪行，通常是点击某一行以确定复制的当前行，核心代码如下：var e = window.eventif (e.target) targ = e.targetelse if (e.srcElement) targ = e.srcElementif (targ.nodeType == 3)targ = targ.parentNodeif(targ.tagName=="TD")第 二个问题插入位置，通常是点击行的下面pos = targ.parentNode.rowIndex+1也有可能在表头首行pos =0再就是表尾"beforeEnd"第三个问题如何插入,先复制当前行：var con = targ.parentNode.cloneNode(true)再进行插入，可以是insertRow，也可以是insertAdjacentElement：var x=document.getElementById('myTable').insertRow(pos)；document.getElementById('myTable').insertAdjacentElement("beforeEnd",con)复制之后可对复制行里的内容进行修改调整：var y=x.insertCell(0).innerHTML=document.getElementById("cell1").value也可进行删除指定行：document.getElementById('myTable').removeChild(Obj.parentNode.rows[i])

window.onload = function () {

    const params = document.getElementById('params')

    const ul = params.querySelector('ul')

    const addBtn = ul.querySelector('#add')

    addBtn.onclick = function (e) {

        const newli = document.createElement('li')

        newli.appendChild(document.createElement('input'))

        const btn = document.createElement('input')

        btn.setAttribute('type', 'button')

        btn.setAttribute('value', '删除')

        btn.setAttribute('opt-type', 'del')

        newli.appendChild(btn)

        ul.appendChild(newli)

    }

    ul.onclick = function (e) {

        const target = e.target

        const optType = target.getAttribute('opt-type')

        if (target.nodeName === 'INPUT' && target.type === 'button' && optType === 'del') {

            this.removeChild(target.parentNode)

        }

    }

} <div id="params">

    <ul>

        <li><input type="text"><input id="add" type="button" value="添加一行"></li>

    </ul>

</div>

点击"添加一行"，生成一条li，包含input，然后append进ul里边。点击删除，用ul删除按钮父元素li。