点击按钮或回车新增表格行

七彩猫猫虫

于 2021-09-23 18:49:00 发布

阅读量192

点赞数

分类专栏：工作中的小问题文章标签： javascript html

本文链接：https://blog.csdn.net/SDAW_1/article/details/120440966

版权

工作中的小问题专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!--
 * @Author: your name
 * @Date: 2021-09-23 15:43:05
 * @LastEditTime: 2021-09-23 16:29:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \text\1.html
-->
<!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>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
</head>

<body>
    <table border="1" id="mainTr">
        <tr>
            <td></td>
            <td>报销时间（该笔支出发生时间）</td>
            <td>报销金额</td>
            <td>报销用途</td>
        </tr>
        <tr>
            <td>1</td>
            <td><input></input></td>
            <td><input></input></td>
            <td><input></input></td>
        </tr>
    </table>
    <button id="btn" onclick="addTr()">+ 添加</button>
    <script>
        var num = 2;
        function addTr() {

            var tr = document.createElement("tr")
            var td1 = document.createElement("td")
            var td2 = document.createElement("td")
            var td3 = document.createElement("td")
            var td4 = document.createElement("td")
            td1.innerHTML = num
            num = num + 1;
            var input1 = document.createElement("input")
            var input2 = document.createElement("input")
            var input3 = document.createElement("input")
            var input4 = document.createElement("input")
            td2.appendChild(input2)
            td3.appendChild(input3)
            td4.appendChild(input4)
            document.getElementById('mainTr').appendChild(tr);
            tr.appendChild(td1)
            tr.appendChild(td2)
            tr.appendChild(td3)
            tr.appendChild(td4)
        }

        
        $("#mainTr").on("keydown", "tr input", function () {
            var e = event || window.event || arguments.callee.caller.arguments[0];

            if (e.keyCode == 13) {
                var inputs = $("#mainTr ").find(":text");
                var idx = inputs.index(this);
                if (idx == inputs.length - 1) {
                    
                    addTr()
                } else {
                    inputs[idx + 1].focus(); 
                    inputs[idx + 1].select(); 
                }
            }
        });
    </script>
</body>

</html>

七彩猫猫虫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击按钮或回车新增表格行

<!DOCTYPE html><html lang="en">
复制链接

扫一扫

专栏目录