动态生成带随机背景色的表格并限制创建次数的JavaScript教程

<!-- 页面主体相关部分 -->
<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>

// 生成随机十六进制颜色代码的函数
function getRandomHexColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

// 全局计数器，用于跟踪已生成的表格数量
let tableCount = 0;
// 定义最大允许生成的表格数量
const MAX_TABLES = 3; // 1st, 2nd, 3rd click will append; 4th click will be stopped.

<script>
    // 全局计数器，用于跟踪已生成的表格数量
    let tableCount = 0;
    // 定义最大允许生成的表格数量
    const MAX_TABLES = 3; // 允许生成3个表格，第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).ready(function () {
        // 绑定点击事件到 #formButton
        $("#formButton").click(function () {
            // 检查是否已达到最大表格数量
            if (tableCount >= MAX_TABLES) {
                alert(`已达到最大允许的表格数量：${MAX_TABLES}个。`);
                return; // 停止执行，不再生成表格
            }

            // 获取一个随机颜色
            const randomBgColor = getRandomHexColor();

            // 动态生成表格HTML，并将随机颜色应用到表格的背景色
            $("#dynamic-forms").append(
                `
                <form class="dynamic-form" 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: ${randomBgColor};">
                        <tr>
                            <td>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(""); // 清空输入框内容
            tableCount++; // 成功生成表格后，计数器递增
        });

        // 绑定移除表格的事件（使用事件委托，因为表格是动态生成的）
        $(document).on("click", ".remove-table-btn", function (click) {
            click.preventDefault();
            $(this).closest('.dynamic-form').remove(); // 移除最近的父级form
            tableCount--; // 移除表格后，计数器递减
            if (tableCount < 0) tableCount = 0; // 防止计数器变为负数
        });

        // 以下是原始代码中的其他函数，根据需求保留或修改
        function yesnoCheck(that) {
            if (that.value == "single") {
                document.getElementById("first").style.display = "block";
                $("#dynamic-forms").empty();
                document.getElementById("dynamic-forms").style.display = "none";
                // 清空相关输入框
                $("#t1, #t2, #t3, #t4, #t5, #t6").val("");
                // 重置动态表格计数器，因为切换到single模式意味着清空了动态表格
                tableCount = 0; 
            } else {
                document.getElementById("first").style.display = "none";
            }
            if (that.value == "multiple") {
                document.getElementById("second").style.display = "block";
                document.getElementById("dynamic-forms").style.display = "block"; // 确保动态表单容器可见
            } else {
                document.getElementById("second").style.display = "none";
            }
        }
        window.yesnoCheck = yesnoCheck; // 将函数暴露到全局作用域，以便HTML中的onchange调用

        jQuery(function ($) {
            function copyForms($pan, $location) {
                $(':input[name]', $location).val(function () {
                    return $(':input[name=' + this.name + ']', $pan).val();
                });
            }

            // 原始代码中的此部分逻辑可能需要根据实际需求调整，
            // 因为 #pan 是一个输入框，其click事件通常用于聚焦而非复制。
            // 如果意图是当 #pan 输入框内容改变时更新其他地方，应使用 'change' 或 'input' 事件。
            // 暂时保留，但请注意其潜在的误解。
            $('#pan').on('click', function () {
                // 这里的 $('#pan') 指的是输入框本身，$('#location') 在原始HTML中是td的id
                // 这段代码的实际效果是尝试将 #pan 输入框的值复制到 #location td下的所有同名输入框
                // 但由于 #location 是一个td，且其下没有具名输入框，此函数可能不会按预期工作
                // 如果需要将 #pan 的值复制到动态生成的表格的Location输入框，需要更复杂的逻辑
                // 暂时保持原样，但建议检查其功能
                // copyForms($('#pan'), $('#location')); 
            });
        });
    });
</script>