JS点击事件input框中的输入内容移动到表格（div），生成表格（div）内容

最新推荐文章于 2022-10-15 23:18:35 发布

大毛小怪物

最新推荐文章于 2022-10-15 23:18:35 发布

阅读量2.1k

点赞数 4

分类专栏： JavaScript 文章标签： JS input点击事件内容出现在div input输入内容点击生成表格内容 HTML

本文链接：https://blog.csdn.net/weixin_44694069/article/details/103519607

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS点击事件input框中的输入内容移动到表格（div），生成表格（div）内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input点击</title>
    <style>
        #div1{
            width: 400px;
            height: 250px;
            padding: 20px;
            border: 1px solid grey;
            text-align: center;
            float: left;
        }
        #div2{
            width: 400px;
            height: 250px;
            padding: 20px;
            border: 1px solid grey;
            text-align: center;
            float: left;
        }
        .ipt{
            width: 250px;
            height: 35px;
            border: 2px solid gainsboro;
            border-radius: 10px;
        }
        #bt{
            width: 80px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: dodgerblue;
            border-radius: 10px;
            border: none;
            color: white;
        }
        table{
            width: 280px;
            border: 1px solid grey;
        }
        table td{
            background-color: powderblue;
            height: 50px;
        }
    </style>
</head>
<body>
<div id="div1">
        输入内容：<input type="text" id="ipt1" class="ipt"><br><br>
        输入内容：<input type="text" id="ipt2" class="ipt"><br><br>
        输入内容：<input type="text" id="ipt3" class="ipt"><br><br>
        <button id="bt">提交</button>
</div>

<div id="div2">

    <table id="tb">
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
    </table>
</div>
<script>
    var ipt = document.getElementsByClassName('ipt');
    var bt = document.getElementById('bt');
    var tb = document.getElementById('tb');

    bt.onmouseup=function () {
        var tr1 = document.createElement('tr');
        for(let i=0;i<ipt.length;i++){
            var text = ipt[i].value;
                var tdd = document.createElement('td');
                tdd.innerHTML=ipt[i].value;
                tr1.appendChild(tdd);
                tb.appendChild(tr1);
        }
        for(var k=0;k<ipt.length;k++)
        ipt[k].value = '';
    }
</script>
</body>
</html>