使用JavaScript和jQuery动态生成带随机背景色的表格并限制创建次数-html教程-PHP中文网

使用JavaScript和jQuery动态生成带随机背景色的表格并限制创建次数

在现代web开发中，动态生成和管理页面元素是常见的需求。例如，根据用户操作添加、修改或删除dom元素。本教程将深入探讨如何利用javascript和jquery库，实现一个功能强大的动态表格生成器，该生成器不仅能响应用户点击创建新表格，还能为每个表格赋予独特的随机背景色，并严格控制可创建的表格总数。

1. 核心概念与技术栈

在开始实现之前，我们首先了解涉及到的核心概念和技术：

DOM操作 (Document Object Model): 允许JavaScript与HTML文档进行交互。我们将使用它来创建、插入和修改HTML元素。
jQuery库: 一个快速、小型且功能丰富的JavaScript库，极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。
事件处理: 监听并响应用户在网页上的操作，例如按钮点击。
状态管理: 在客户端维护应用程序的状态，例如已创建表格的数量。
动态样式: 在运行时生成并应用CSS样式，例如随机背景颜色。

2. 需求分析与解决方案设计

根据原始问题，我们需要实现以下功能：

动态生成表格: 当用户点击特定按钮时，向页面中添加一个新的表格结构。
随机背景色: 每个新生成的表格都应该拥有一个与之前不同的随机背景颜色。
限制创建次数: 设定一个最大值，当创建的表格数量达到此限制时，停止继续生成表格并给出提示。

针对这些需求，我们的解决方案设计如下：

计数器变量: 引入一个JavaScript变量来追踪已创建表格的数量。
随机颜色生成函数: 编写一个JavaScript函数，用于生成有效的CSS颜色值（例如，十六进制颜色码）。
修改点击事件处理器: 在按钮的点击事件中，首先检查计数器是否达到上限。如果未达到，则生成随机颜色，将其应用到新表格的HTML结构中，然后将表格添加到DOM，并递增计数器。

3. 实现步骤与代码示例

我们将基于原始代码进行修改和优化。假设页面中存在一个ID为 formButton 的按钮用于触发表格生成，以及一个ID为 dynamic-forms 的容器用于存放动态生成的表格。

立即学习“Java免费学习笔记（深入）”；

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

3.1 引入计数器和随机颜色函数

首先，在您的 <script> 标签内部，定义一个全局计数器变量和一个用于生成随机十六进制颜色的函数。

<script>
    // ... 现有代码 ...

    let tableClickCount = 0; // 初始化表格创建计数器
    const MAX_TABLES = 4;    // 定义最大允许创建的表格数量

    /**
     * 生成一个随机的十六进制颜色代码。
     * @returns {string} 例如：#RRGGBB
     */
    function getRandomHexColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    // ... 现有代码 ...
</script>

登录后复制

3.2 修改按钮点击事件处理器

接下来，修改 $("#formButton").click() 事件处理器。在该处理器内部，我们将加入逻辑来检查表格数量限制，生成随机颜色，并将其应用到新表格的样式中。

<script>
    // ... (getRandomHexColor 和 tableClickCount, MAX_TABLES 的定义) ...

    $(document).ready(function () {
        $("#formButton").click(function () {
            // 1. 检查是否达到表格数量上限
            if (tableClickCount >= MAX_TABLES) {
                alert(`已达到最大表格数量限制 (${MAX_TABLES}个)。`);
                return; // 阻止继续执行，不再生成表格
            }

            // 确保动态表单容器可见
            document.getElementById("dynamic-forms").style.display = "block";

            // 2. 生成一个随机颜色
            const randomColor = getRandomHexColor();

            // 3. 构建包含随机背景色的表格HTML字符串
            // 注意：为了避免ID重复，我们将form的ID动态化
            $("#dynamic-forms").append(
                `
                <form id="dynamicForm-${tableClickCount + 1}" style="margin-bottom:10px;margin-top:10px">
                    <button style="float:right; margin-right:400px;" type="button1" class="remove-table-btn" value="clear">-</button>
                    <table style="background-color: ${randomColor};"> <!-- 在这里应用随机颜色 -->
                    <tr>
                        <td id="location-${tableClickCount + 1}">Location                         
                        <input type="text" value="`+$("#pan").val()+`">
                        </td>
                        <td>P1                          
                        <input type="text">
                        </td>
                    </tr>
                        <tr>
                        <td>P2                                   
                        <input type="text">
                        </td>

                        <td>P3                           
                        <input type="text">
                        </td>
                    </tr>
                        <tr>
                        <td>Sometime                        
                        <input type="text">
                        </td>

                        <td>Full day                  
                        <input type="text">
                        </td>
                    </tr>
                    </table>
                </form>
                `
            );
            $("#pan").val(""); // 清空输入框
            tableClickCount++; // 4. 递增计数器
         });
    });

    // 原始的删除表格事件绑定，可以修改为使用类选择器，因为ID "tbl1" 可能会重复
    $(document).on("click",".remove-table-btn",function (click) {
        click.preventDefault();
        $(this).closest('form').remove(); // 移除最近的form父元素
        // 考虑是否需要递减 tableClickCount，这取决于您的业务逻辑
        // 如果删除后允许重新创建，则需要 tableClickCount--;
        // 如果删除只是隐藏，不影响创建上限，则不需要。
    });

    // ... (其他现有代码，如 yesnoCheck 和 copyForms) ...
</script>

登录后复制

代码说明：

tableClickCount 和 MAX_TABLES: tableClickCount 用于记录当前已创建的表格数量，MAX_TABLES 定义了允许创建的最大数量。
getRandomHexColor(): 此函数通过随机生成6位十六进制字符来构建一个颜色代码，例如 #A3F2C1。
数量限制检查: 在 formButton 的点击事件处理函数开始时，我们添加了一个 if (tableClickCount >= MAX_TABLES) 检查。如果已达到上限，则弹出一个警告框并使用 return; 退出函数，阻止表格的进一步生成。
应用随机颜色: 在构建表格的HTML字符串时，我们将 randomColor 变量嵌入到 <table> 标签的 style 属性中：style="background-color: ${randomColor};"。
递增计数器: 每成功生成一个表格后，tableClickCount 会递增 1。
ID唯一性: 原始代码中 id="form1" 和 id="tbl1" 可能会导致多个元素拥有相同的ID，这违反了HTML规范。在修改后的代码中，我们将 form 的ID更改为 dynamicForm-${tableClickCount + 1} 以确保唯一性。同时，删除按钮的ID tbl1 也被替换为类 remove-table-btn，以便更好地处理多个删除按钮。
删除事件优化: 原始的 $(document).on("click","#tbl1",function (click)) 被修改为 $(document).on("click",".remove-table-btn",function (click))，使用类选择器来绑定事件，并通过 $(this).closest('form').remove(); 更准确地移除整个表单容器。

4. 完整HTML结构示例

为了使上述JavaScript代码能够正常工作，确保您的HTML结构包含相应的元素，例如下拉菜单、输入框、按钮和动态容器。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态表格生成与样式定制</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #0979ad;
            color: #fff;
        }
        center {
            margin-top: 20px;
        }
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 0 auto;
            background-color: #225670ad; /* 默认表格颜色 */
            border-radius: 8px;
            overflow: hidden;
        }
        td {
            padding: 10px;
            border: 1px solid #3c6e8e;
        }
        input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 150px;
        }
        button {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            opacity: 0.9;
        }
        .remove-table-btn {
            background-color: #f44336;
        }
        select {
            padding: 8px;
            border-radius: 4px;
        }
        #dynamic-forms form {
            border: 1px solid #3c6e8e;
            padding: 15px;
            border-radius: 8px;
            background-color: rgba(0,0,0,0.1); /* 略微透明背景 */
        }
    </style>
</head>
<body style="background-color: #0979ad;">
    <br><br>
    <center>
        <div>
            <select id="selector" onchange="yesnoCheck(this);">
                <option value="select">__Select__</option>
                <option value="single">Single</option>
                <option value="multiple">Multiple</option>
            </select>
        </div>
    </center>
    <br><br>
    <center>
        <div id="first" style="display: none;">
            <table id="tbl" style="background-color: #225670ad;">
                <tr>
                    <td>Location                       
                         
                        <input id="t1" type="text">
                    </td>
                    <td>P1                          
                        <input id="t2" type="text">
                    </td>
                </tr>
                <tr>
                    <td>P2                        
                                  
                        <input id="t3" type="text">
                    </td>

                    <td>P3                       
                          
                        <input id="t4" type="text">
                    </td>
                </tr>
                <tr>
                    <td>Sometime                       
                        <input id="t5" type="text">
                    </td>

                    <td>Full day                 
                        <input id="t6" type="text">
                    </td>
                </tr>
            </table>
        </div>
    </center>
    <center>
        <div id="second" style="display:none;">
            <label>Location</label>
            <input type="text" id="pan" name="pan">
            <button type="button" id="formButton">+</button>
        </div>
    </center>
    <br><br><br>
    <center id="dynamic-forms">
        <!-- 动态生成的表格将显示在这里 -->
    </center> <br><br>

    <script>
        // yesnoCheck 函数保持不变
        function yesnoCheck(that) {
            if (that.value == "single") {
                document.getElementById("first").style.display = "block";
                $("#dynamic-forms").empty();
                document.getElementById("dynamic-forms").style.display = "none";
                document.getElementById("t1").value = "";
                document.getElementById("t2").value = "";
                document.getElementById("t3").value = "";
                document.getElementById("t4").value = "";
                document.getElementById("t5").value = "";
                document.getElementById("t6").value = "";
                document.getElementById("formButton").value = "";
                tableClickCount = 0; // 重置计数器当切换到single模式时
            } else {
                document.getElementById("first").style.display = "none";
            }
            if (that.value == "multiple") {
                document.getElementById("second").style.display = "block";
            } else {
                document.getElementById("second").style.display = "none";
            }
        }

        // 随机颜色生成函数和计数器定义
        let tableClickCount = 0;
        const MAX_TABLES = 4;

        function getRandomHexColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // 删除表格事件绑定 (使用类选择器)
        $(document).on("click",".remove-table-btn",function (click) {
            click.preventDefault();
            $(this).closest('form').remove();
            tableClickCount--; // 删除表格时递减计数器，允许重新创建
            if (tableClickCount < 0) tableClickCount = 0; // 防止计数器变为负数
            if (tableClickCount === 0) {
                document.getElementById("dynamic-forms").style.display = "none";
            }
        });

        // 动态生成表格的点击事件
        $(document).ready(function () {
            $("#formButton").click(function () {
                if (tableClickCount >= MAX_TABLES) {
                    alert(`已达到最大表格数量限制 (${MAX_TABLES}个)。`);
                    return;
                }

                document.getElementById("dynamic-forms").style.display = "block";
                const randomColor = getRandomHexColor();

                $("#dynamic-forms").append(
                    `
                    <form id="dynamicForm-${tableClickCount + 1}" style="margin-bottom:10px;margin-top:10px">
                        <button style="float:right; margin-right:400px;" type="button" class="remove-table-btn" value="clear">-</button>
                        <table style="background-color: ${randomColor};">
                        <tr>

登录后复制

以上就是使用JavaScript和jQuery动态生成带随机背景色的表格并限制创建次数的详细内容，更多请关注php中文网其它相关文章！