JavaScript实现动态表格

最新推荐文章于 2023-03-28 14:21:25 发布

是阿信ya

最新推荐文章于 2023-03-28 14:21:25 发布

阅读量168

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_53972864/article/details/127948452

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

input{
    margin: 10px 20px;
    padding: 0 5px;
    width: 120px;
    height: 26px;

}
 table{
    width: 500px;
    /* border:  solid 1px; */
    text-align: center;
}
td{
    padding: 5px;
}

</style>
<body>
    <div>
        ID: <input type="text" id="ID" /><br>
        姓名: <input type="text" id="name" /><br>
        电话: <input type="text" id="phone" /><br>
        <button>保存</button>
    </div>
    <table border="1">
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td>Tel</td>
            <td>操作</td>
        </tr>
    </table>
    
</body>
<script>
    var input=document.querySelectorAll('input')
    var buuton=document.querySelector('button')
    var table=document.querySelector('table')
    buuton.onclick=function(){
        tr=document.createElement('tr')
        for(let i=0;i<4;i++){
            td=document.createElement('td')
            if(i==3){
                td.innerHTML='删除'
                td.onclick=function(){
                    delectTr=this.parentNode
                    table.removeChild(delectTr)
                }
            }else{
                console.log(input[i].value)
                td.innerHTML=input[i].value
            }
            tr.appendChild(td)
        }
         table.appendChild(tr)
    }
</script>
</html>

请添加图片描述