练习demo

最新推荐文章于 2024-10-29 18:59:46 发布

原创最新推荐文章于 2024-10-29 18:59:46 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#表格

本文介绍了一个使用HTML、CSS和JavaScript实现的动态表格生成方法。通过用户输入行数和列数，实时更新显示，并生成相应大小的表格。文章包含了完整的代码示例，展示了如何通过事件监听和DOM操作来实现这一功能。

表格练习demo

编辑器制作效果展示：

页面展示

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td {border: 1px solid black;background-color: #eee;width: 50px;height: 50px}
        td:hover {border: 1px solid red;background-color: deepskyblue}
    </style>
</head>
<body>
<input type="text" placeholder="行" class="i">
<input type="text" placeholder="列" class="i1">
<input type="button" value="创建" id="bt">
<span class="s"></span>
<hr>
<script>
    var x = "x";
    var y = "y";
    var oi = document.querySelector(".i");
    var oi1 = document.querySelector(".i1");
    var obt = document.querySelector("#bt");
    var os = document.querySelector(".s");
    os.innerText = "(" + x + "," + y + ")";
    oi.addEventListener("blur", run1);
    oi1.addEventListener("blur", run2);
    // 输入框与显示span同步
    function run1() {
        os.innerText = "(" + this.value + "," + y + ")";
        x = this.value;
    }
    function run2() {
        os.innerText = "(" + x + "," + this.value + ")";
        y = this.value;
    }
    obt.addEventListener("click", run);
    // 关键方法，根据参数创建表格
    function run() {
        var td = "";
        var tr = "";
        for (var i = 0; i < y; i++) {
            td += "<td>" + (i + 1) + "</td>";
        }
        for (var i = 0; i < x; i++) {
            tr += "<tr>" + td + "</tr>";
        }
        var str = "<table>" + tr + "</table>";
        document.body.innerHTML += str;
    }
</script>
</body>
</html>

整理笔记时发现自己做的小demo,传上来了，么么哒！