JavaScript按需求自动生成表格案例（事件委托）------JavaScript学习之路9

最新推荐文章于 2020-08-17 12:08:51 发布

dragoned_123

最新推荐文章于 2020-08-17 12:08:51 发布

阅读量261

点赞数

分类专栏： JavaScript 文章标签： js html5 css3 css javascript

本文链接：https://blog.csdn.net/dragoned_123/article/details/107408218

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

JavaScript生成表格案例

实现两个文本框输入行和列，之后点击生成按钮，生成对应行列的表格，如果没有输入点击生成则需要弹出警告，在每一行的最后面添加删除按钮，如果删除则弹出确认信息，之后删除此行。

【提示】按钮添加事件最好使用事件委托。点击查看事件委托

效果

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>生成表格</title>
    <style>
        html{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        body{
            margin-top: 200px;
        }
        td{
            border: solid red 1px;
        }
    </style>
</head>
<body>
<input type="text" id="ro"/>
<input type="text" id="co"/>
<button id="bt">生成</button>
    <table id="table1" style="display: none">

    </table>
<script>
    var r = document.getElementById("ro");
    var c = document.getElementById("co");
    var bt = document.getElementById("bt");
    var tab = document.getElementById("table1");
    bt.onclick = function () {
        if (r.value && c.value) {
            for (var i = 0; i < r.value; i++) {//r.value直接不用理会它的类型虽然是String类型的
                var rt = document.createElement("tr");
                for (var j = 0; j < c.value; j++) {
                    var ct = document.createElement("td");
                    var text = document.createTextNode("行" + i + "列" + j);
                    ct.appendChild(text);//添加文本到td内
                    rt.appendChild(ct);//添加列到此行
                }
                var dbutton = document.createElement("td");//创建button按钮
                dbutton.innerHTML = "<button>删除</button>";
                rt.appendChild(dbutton);//添加button到行
                tab.appendChild(rt);//添加行到表格
            }
            tab.style.display = "block";
        }else{
            alert("请输入行列");
        }
        tab.onclick = function (ev) {//实现事件委托
            var e = ev || window.event;
            var target = e.target || window.event.srcElement;
            if(target.nodeName.toLowerCase() == "button"){
                if(confirm("确定删除吗？")) {
                    tab.removeChild(target.parentNode.parentNode);
                }
            }
        }
    }
</script>
</body>
</html>

dragoned_123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript按需求自动生成表格案例（事件委托）------JavaScript学习之路9

JavaScript生成表格案例实现两个文本框输入行和列，之后点击生成按钮，生成对应行列的表格，如果没有输入点击生成则需要弹出警告，在每一行的最后面添加删除按钮，如果删除则弹出确认信息，之后删除此行。【提示】按钮添加事件最好使用事件委托。点击查看事件委托效果完整代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>生成表格&l
复制链接

扫一扫