新闻中心

动态生成带随机背景色的表格并限制追加次数的J*aScript教程

2025-11-07
浏览次数：次
返回列表

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

本教程详细介绍了如何使用j*ascript和jquery动态生成html表格，并为每个新生成的表格应用随机背景色。此外，我们还将实现一个机制，限制用户可以追加表格的次数，以防止页面内容无限增长。通过具体的代码示例，您将学会如何控制ui元素的动态创建和样式设置。

动态生成带随机背景色的表格并限制追加次数的J*aScript教程

在现代Web开发中，动态地添加、移除和修改页面元素是常见的需求。本教程将指导您如何利用J*aScript和jQuery实现一个功能，即在用户点击按钮时，动态地追加一个带有随机背景色的表格，并设定一个追加次数的上限。

核心需求分析

我们将解决以下三个主要问题：

  1. 动态追加表格： 用户点击按钮时，在指定容器中生成新的表格结构。
  2. 随机背景色： 每个新追加的表格都应拥有一个独特的、随机生成的背景色。
  3. 限制追加次数： 设置一个最大追加数量，当达到该数量时，停止追加表格。

实现步骤与技术细节

1. 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: #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 50px;
        }
        #second {
            margin-bottom: 20px;
        }
        #dynamic-forms form {
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            position: relative;
        }
        #dynamic-forms table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        #dynamic-forms td {
            padding: 8px;
            border: 1px solid #ddd;
        }
        #dynamic-forms input[type="text"] {
            margin-left: 10px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        #tbl1 {
            float: right;
            margin-right: 10px;
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
        #tbl1:hover {
            background-color: #d32f2f;
        }
        #formButton {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        #formButton:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div id="second">
        <label>Location</label>
        <input type="text" id="pan" name="pan">
        <button type="button" id="formButton">+</button>
    </div>
    <div id="dynamic-forms">
        <!-- 动态生成的表格将显示在这里 -->
    </div>

    <script>
        // J*aScript/jQuery 代码将放在这里
    </script>
</body>
</html>

在上述HTML中：

  • #formButton 是触发追加操作的按钮。
  • #dynamic-forms 是所有动态生成表格的容器。
  • 我们还添加了一些基础CSS来美化页面和动态表格。

2. J*aScript/jQuery实现

我们将使用jQuery来简化DOM操作。

a. 初始化计数器

为了限制表格的追加次数，我们需要一个计数器来跟踪当前已追加的表格数量。

let tableCount = 0; // 初始化表格计数器
const MAX_TABLES = 3; // 设置最大追加表格数量
b. 生成随机颜色函数

创建一个辅助函数来生成随机的RGB颜色字符串。

火龙果写作 火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

火龙果写作 277 查看详情 火龙果写作 
function getRandomColor() {
    const r = Math.floor(Math.random() * 256); // 0-255
    const g = Math.floor(Math.random() * 256); // 0-255
    const b = Math.floor(Math.random() * 256); // 0-255
    return `rgb(${r}, ${g}, ${b})`;
}
c. 按钮点击事件处理

现在，我们将修改#formButton的点击事件处理逻辑，集成计数器和随机颜色功能。

$(document).ready(function () {
    // 监听 #formButton 的点击事件
    $("#formButton").click(function () {
        // 1. 检查是否达到最大表格数量
        if (tableCount >= MAX_TABLES) {
            alert(`已达到最大表格数量 (${MAX_TABLES})，无法继续追加。`);
            return; // 阻止继续执行
        }

        // 2. 生成随机背景色
        const randomBgColor = getRandomColor();

        // 3. 构建表格HTML字符串
        // 注意：这里使用了模板字符串，并动态插入了背景色和输入框的值
        const newTableHtml = `
            <form id="form${tableCount + 1}" style="margin-bottom:10px;margin-top:10px">
                <button style="float:right; margin-right:10px;" 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>
        `;

        // 4. 将新表格追加到容器中
        $("#dynamic-forms").append(newTableHtml);

        // 5. 更新计数器
        tableCount++;

        // 6. 清空Location输入框的值 (可选)
        $("#pan").val("");
    });

    // 监听动态生成的移除按钮的点击事件
    // 使用事件委托，因为按钮是动态添加的
    $(document).on("click", ".remove-table-btn", function (event) {
        event.preventDefault(); // 阻止默认行为
        $(this).closest("form").remove(); // 移除最近的父级 <form> 元素
        tableCount--; // 移除表格后，计数器减一
    });
});

代码解析：

  • tableCount 和 MAX_TABLES 用于控制追加数量。
  • getRandomColor() 函数生成一个随机的RGB颜色字符串。
  • 在$("#formButton").click()事件处理函数中：
    • 首先检查 tableCount 是否已达到 MAX_TABLES。如果是，则弹出警告并退出。
    • 调用 getRandomColor() 获取一个随机颜色。
    • 使用J*aScript模板字符串（反引号 `）构建新的表格HTML。我们将随机颜色直接插入到表格的style属性中。
    • $("#pan").val() 用于获取Location输入框的当前值，并将其设置到新表格的相应输入框中。
    • $("#dynamic-forms").append(newTableHtml) 将生成的HTML追加到指定的容器中。
    • tableCount++ 增加计数器。
    • $("#pan").val("") 清空Location输入框，以便下次输入。
  • $(document).on("click", ".remove-table-btn", function (event) { ... }); 使用事件委托来处理动态生成的移除按钮的点击事件。当表格被移除时，tableCount 也会相应减少，这样用户就可以在移除表格后继续追加新表格，直到再次达到上限。

完整示例代码

将上述HTML结构、CSS样式和J*aScript代码整合后，您将得到一个功能完整的页面。

<!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: #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 50px;
        }
        #second {
            margin-bottom: 20px;
        }
        #dynamic-forms form {
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            position: relative;
        }
        #dynamic-forms table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        #dynamic-forms td {
            padding: 8px;
            border: 1px solid #ddd;
        }
        #dynamic-forms input[type="text"] {
            margin-left: 10px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .remove-table-btn { /* 统一移除按钮的样式 */
            float: right;
            margin-right: 10px;
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
        .remove-table-btn:hover {
            background-color: #d32f2f;
        }
        #formButton {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        #formButton:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div id="second">
        <label>Location</label>
        <input type="text" id="pan" name="pan">
        <button type="button" id="formButton">+</button>
    </div>
    <div id="dynamic-forms">
        <!-- 动态生成的表格将显示在这里 -->
    </div>

    <script>
        let tableCount = 0; // 初始化表格计数器
        const MAX_TABLES = 3; // 设置最大追加表格数量

        // 生成随机RGB颜色字符串的辅助函数
        function getRandomColor() {
            const r = Math.floor(Math.random() * 256);
            const g = Math.floor(Math.random() * 256);
            const b = Math.floor(Math.random() * 256);
            return `rgb(${r}, ${g}, ${b})`;
        }

        $(document).ready(function () {
            // 监听 #formButton 的点击事件
            $("#formButton").click(function () {
                // 1. 检查是否达到最大表格数量
                if (tableCount >= MAX_TABLES) {
                    alert(`已达到最大表格数量 (${MAX_TABLES})，无法继续追加。`);
                    return; // 阻止继续执行
                }

                // 2. 生成随机背景色
                const randomBgColor = getRandomColor();

                // 3. 构建表格HTML字符串
                const newTableHtml = `
                    <form id="form${tableCount + 1}" style="margin-bottom:10px;margin-top:10px">
                        <button 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>
                `;

                // 4. 将新表格追加到容器中
                $("#dynamic-forms").append(newTableHtml);

                // 5. 更新计数器
                tableCount++;

                // 6. 清空Location输入框的值 (可选)
                $("#pan").val("");
            });

            // 监听动态生成的移除按钮的点击事件
            // 使用事件委托，因为按钮是动态添加的
            $(document).on("click", ".remove-table-btn", function (event) {
                event.preventDefault(); // 阻止默认行为
                $(this).closest("form").remove(); // 移除最近的父级 <form> 元素
                tableCount--; // 移除表格后，计数器减一
            });
        });
    </script>
</body>
</html>

注意事项与最佳实践

  1. CSS样式分离： 在本教程中，为了简洁直接地展示动态颜色，我们将背景色作为内联样式直接写入HTML字符串。但在实际项目中，更推荐的做法是定义一系列CSS类（例如.color-scheme-1, .color-scheme-2），然后动态地为表格添加这些类，或者使用CSS变量。对于完全随机的颜色，内联样式是直接有效的方法。
  2. 事件委托： 对于动态添加到DOM的元素（如本例中的移除按钮.remove-table-btn），必须使用事件委托（$(document).on("click", selector, function(){...})）来绑定事件，否则直接绑定的事件监听器将无法作用于新元素。
  3. 用户体验反馈： 当达到追加上限时，除了弹出alert提示，还可以考虑禁用追加按钮，或者改变按钮样式，提供更友好的视觉反馈。
  4. 代码可维护性： 随着项目复杂度的增加，可以将生成表格HTML的逻辑封装成一个独立的函数，使其更易于管理和测试。
  5. 安全性： 如果动态生成的HTML中包含用户输入的内容，务必进行适当的清理和转义，以防止跨站脚本（XSS）攻击。本示例中$("#pan").val()直接插入，在实际应用中应谨慎处理。

总结

通过本教程，您学会了如何利用J*aScript和jQuery实现以下功能：

  • 动态创建并追加HTML表格到页面。
  • 为每个新生成的表格应用随机的背景颜色，增强视觉多样性。
  • 通过计数器机制限制动态元素的追加次数，有效控制页面内容。
  • 使用事件委托处理动态元素的交互。

这些技术是构建交互式和动态Web界面的基础，掌握它们将大大提升您的前端开发能力。

以上就是动态生成带随机背景色的表格并限制追加次数的J*aScript教程的详细内容，更多请关注其它相关文章！


# 清空  # 白云网站建设多少米  # 庐江营销推广推荐  # 肇庆公司的网站建设  # 网站推广的方法包括()  # 郑刚seo培训视频  # 郑州网站建设银行签约  # 关键词排名从哪来  # 怎么更好的找网站推广  # 营口seo公司成功案例  # 麦当劳营销推广文案范文  # 如何实现  # 绑定  # 您将  # 可选  # 弹出  # css  # 在这里  # 输入框  # 背景色  # 移除  # googl  # 前端开发  # app  # go  # ajax  # 前端  # js  # html  # jquery  # java  # javascript 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： 《燕云十六声》两周内达九百万玩家！位居畅销榜第五  c++中为什么推荐使用using替代typedef_c++现代化类型别名  响应式图片在网页设计中的正确实现方法  sublime怎么进行远程开发编辑_配置rsub/rmate实现sublime编辑服务器文件  正确连接J*aScript到HTML实现可点击图片与自定义事件处理  解决Python logging 中 datefmt 导致时间戳固定不变的问题  Lar*el头像管理：图片缩放与旧文件删除的最佳实践  顺丰快递查询系统 官方正版查询入口  零跑汽车11月交付量达70327台 实现连续9个月正增长  163邮箱网页版入口导航平台 163邮箱网页版登录入口官网导航  蛙漫画网页版全站入口 蛙漫热门作品免费浏览  J*aScript中高效管理与清空动态列表：避免循环陷阱  汽车之家官方网站官网入口_汽车之家网页版直接进入  Promise错误处理：在catch后终止链式then执行的策略  手机CPU怎么影响游戏体验_手机CPU对游戏性能的影响分析  J*a 递归快速排序中静态变量的状态管理与陷阱  Yandex浏览器官方网页版入口 Yandex浏览器最新版官网  PHP表单数据传递：如何通过隐藏输入字段获取动态ID  如何在J*a中实现统一对象行为接口_项目大型化时的接口规范化  搜狗浏览器如何使用密码生成器创建强密码 搜狗浏览器内置密码安全工具  cad怎么合并重叠的线段_cad清理重复重叠线条的操作方法  学习通网页版官方登录 超星学习通电脑端入口指南  c++中的std::basic_string的SSO优化_c++短字符串优化深度解析  俄罗斯Yandex免登录入口_Yandex搜索引擎官网一键直达  Mac怎么查看崩溃日志_Mac控制台错误报告分析  PHP URL参数传递与500错误调试指南  基于动态规划的房屋花卉种植最小成本算法详解  windows10怎么查看硬盘序列号_windows10硬盘id查询命令  网易大神账号申诉需要多久_网易大神账号申诉流程说明  sublime如何配置Python开发环境_将sublime打造成轻量级Python IDE  印象笔记如何设离线包出差查阅_印象笔记设离线包出差查阅【离线阅读】  漫蛙manwa2最新登录网址_漫蛙manwa2手机网页版入口  Surface怎么安装系统 微软Surface Pro U盘重装win11教程  电脑IP地址怎么查 查看本机IP地址的几种方法  如何优雅地解决Livewire文件上传难题？SpatieLivewireFilepond让一切变得简单  Excel函数批量查找替换超快方法_Excel用REPLACE和FIND函数秒级替换  c++20的std::jthread是什么_c++可中断线程与RAII式管理  怎样把文件彻底粉碎无法恢复_Windows下安全删除敏感数据【隐私保护】  Mudbox图层蒙版怎么用_Mudbox图层蒙版数字雕刻应用技巧  俄罗斯方块最新版入口 俄罗斯方块在线玩官网入口  《北京人工智能产业白皮书（2025）》发布：全年核心产值预计突破 4500 亿元  J*aScript中向JSON对象添加新属性的正确姿势  蓝湖怎样用切图标注提对接效率_蓝湖用切图标注提对接效率【设计对接】  c++如何实现一个简单的软件渲染器_c++从零开始的3D图形学  QQ官网正版登录链接 QQ在线登录入口最新  b站怎么删除评论_b站评论管理与删除操作  想当下一个《2077》？《心之眼》Steam评价升至"多半好评"  漫蛙2正版漫画站 漫蛙2网页版快速访问入口  微信网页版扫码登录入口 微信网页版二维码登录入口  Yandex免登录网页版地址 Yandex搜索引擎官方访问入口 

上一篇：J*aScript模块化实践：分离数据与逻辑构建可维护的图片画廊
下一篇：JS函数如何定义函数回调嵌套_JS函数回调嵌套定义与回调地狱避免方法

搜索