用JS在添加一行那里 往下添加那一行并且可以删除 求高手

用JS在添加一行那里 往下添加那一行并且可以删除 求高手,第1张

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。

<html>

<script language="javascript">

function createTr(){

var tb=document.all.tb

var tr=tb.insertRow()

var td=tr.insertCell()

td.innerHTML="test"

td.onclick=clickMe

}

function clickMe(){

alert("事件")

}

</script>

<body>

<table id="tb" border="2">

<tr>

<td onclick="createTr()">click me</td>

</tr>

</table>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11881114.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存