找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发动态创建表格，可实时编辑添加删除行

2018-10-22 分类：JavaScript 阅读(1016) 评论(0)
linux前端开发工具
前端开发是用什么开发工具
目前最流行的前端开发工具

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>生成表格</title>
    <style>
        *{
margin:0;
padding:0;
}
table{
box-shadow:0 0 5px #49B99F;
border-collapse: collapse;
margin:10px;
}
td{
box-shadow:0 0 5px #49B99F;
width:160px;
height: 30px
}
input{
border:0;
box-shadow: 0 0 5px #49B99F;
width:100px;
height: 30px;
background: #fff
}
#txt1,#txt2,#btn{
margin:10px;
}
</style>
</head>
<body>
    <input type=”text” id=”txt1″ placeholder=”行数”>
    <input type=”text” id=”txt2″ placeholder=”列数”>
    <input type=”button” id=”btn” value=”生成”>
    <div id=”box”></div>
    <script>
        var oTxt1 = document.getElementById(‘txt1’);
        var oTxt2 = document.getElementById(‘txt2’);
        var oDiv = document.getElementById(‘box’);
        var oBtn = document.getElementById(‘btn’);
        var rows, cols;
        oBtn.onclick = function () {
            oDiv.innerHTML = “”;
            var oTb = document.createElement(“table”);
            rows = parseInt(oTxt1.value);
            cols = parseInt(oTxt2.value);
            for (var i = 0; i < rows; i++) {
                var oTr = document.createElement(“tr”);
                for (var j = 0; j < cols; j++) {
                    var oTd = document.createElement(“td”);
                    oTr.appendChild(oTd);
                }
                var trDelete = document.createElement(“input”);
                var trAdd = document.createElement(“input”);
                trDelete.type = “button”;
                trDelete.value = “删除”;
                trAdd.type = “button”;
                trAdd.value = “添加”;
                oTr.appendChild(trDelete);
                oTr.appendChild(trAdd);
                oTb.appendChild(oTr);
                trDelete.addEventListener(“click”, del, false);
                trAdd.addEventListener(“click”, add, false);
            }
            oDiv.appendChild(oTb);
            oTb.addEventListener(“click”, edit, false);
        }
        function del() {
            this.parentNode.parentNode.removeChild(this.parentNode);
        }
        function add() {
            var newTr = document.createElement(“tr”);
            for (var j = 0; j < cols; j++) {
                var newTd = document.createElement(“td”);
                newTr.appendChild(newTd);
            }
            this.parentNode.parentNode.insertBefore(newTr, this.parentNode.nextSibling);
            var trDelete = document.createElement(“input”);
            var trAdd = document.createElement(“input”);
            trDelete.type = “button”;
            trDelete.value = “删除”;
            trAdd.type = “button”;
            trAdd.value = “added”;
            newTr.appendChild(trDelete);
            newTr.appendChild(trAdd);
            trDelete.addEventListener(“click”, del, false);
            trAdd.addEventListener(“click”, add, false);
        }
        function edit(e) {
            if (e.target.nodeName.toLowerCase() == “td”) {
                var oInput = document.createElement(“input”);
                oInput.type = “text”;
                oInput.value = e.target.innerHTML;
                e.target.innerHTML = “”;
                e.target.appendChild(oInput);
                oInput.focus();
                oInput.addEventListener(“click”, write, false);
                oInput.addEventListener(“blur”, save, false);
            }
        }
        function write(e) {
            e.stopPropagation();
        }
        function save(e) {
            this.parentNode.innerHTML = this.value;
        }
    </script>
</body>
</html>
web前端开发工具vs
流行的前端开发工具
vue前端开发工具
赞(0)
前端开发者 » 前端开发动态创建表格，可实时编辑添加删除行
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论