jqeury 动态删除、添加表格demo

于 2011-03-24 07:57:33 发布
阅读量91 收藏
点赞数
文章标签： CSS jQuery JavaScript XHTML HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vinceyu/article/details/83877598
版权

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>download by http://www.codefans.net</title>
    <link href="App_Files/CSS/default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #tb .td{
            text-align: center;
            font-weight: bold;
            background-color: #6699FF;
            color: #FFFFFF;
            border:1px solid #000;
        }
    </style>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //隐藏模板tr
            $("#tb tr").eq(2).hide();
            var i = 0;
            $("#BtAdd").click(function() {
　　　　　//复制一行
                var tr = $("#tb tr").eq(2).clone();
                tr.find("td").get(0).innerHTML = ++i;
                tr.show();
                tr.appendTo("#tb");
            });
            $("#BtDel").click(function() {
                $("#tb tr:gt(2)").each(function() {
                    if ($(this).find("#CK").get(0).checked == true) {
                        $(this).remove();
                    }
                });
                i = 0;
                $("#tb tr:gt(2)").each(function() {
                    $(this).find("td").get(0).innerHTML = ++i;
                });
                $("#CKA").attr("checked", false);
            });
            $("#CKA").click(function() {
                $("#tb tr:gt(2)").each(function() {
                    $(this).find("#CK").get(0).checked = $("#CKA").get(0).checked;
                });
            });
        })
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <table id="tb" style="border:1px solid #000;">
           <tr>
                <td colspan="10" style="text-align:right">
                    <input id="BtAdd" type="button" value="添加" />&nbsp;<input id="BtDel" type="button" value="删除" /></td>
            </tr>
            <tr>
                <td style="width:25px;"></td>
                <td style="width:25px;">
                    <input id="CKA" name="CKA" type="checkbox"/></td>
                <td style="width:20%;">
                    字段名</td>
                <td style="width:20%;">
                    名称</td>
                <td style="width:15%;">
                    数据类型</td>
                <td style="width:40px;">
                    主键</td>
                <td style="width:40px;">
                    必填</td>
                <td style="width:20%;">
                    长度</td>
                <td style="width:40px;">
                    有效</td>
                <td style="width:80px;">
                    排序</td>
            </tr>
            <tr>
                <td style="text-align: center"></td>
                <td style="text-align: center">
                    <input id="CK" type="checkbox" name="CK"/></td>
                <td style="text-align: center">
                    <input id="TName" type="text" name="TName" /></td>
                <td style="text-align: center">
                    <input id="TRm" type="text" name="TRm" /></td>
                <td style="text-align: center">
                    <select id="SType" name="SType" style=" width:100px;">
                        <option>1</option>
                        <option>2</option>
                    </select></td>
                <td style="text-align: center">
                    <input id="CKIsPR" type="checkbox" name="CKIsPR"/></td>
                <td style="text-align: center">
                    <input id="CKIsNull" type="checkbox" name="CKIsNull"/></td>
                <td style="text-align: center">
                    <input id="TLen" type="text" size="10" name="TLen" /></td>
                <td style="text-align: center">
                    <input id="CKIsUse" type="checkbox" checked="checked" name="CKIsUse"/></td>
                <td style="text-align: center">
                    <input id="TxtSortNO" type="text" size="4" name="TxtSortNO" /></td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

 

 
vinceyu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现动态添加和删除input框实例代码
10-17
主要介绍了jQuery实现动态添加和删除input框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
动态创建表格，删除行列
哈达f
08-10 475
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &
jquery 动态表格
03-18
jQuery提供了一系列方法用于操作表格，如添加行(`append()`)、删除行(`remove()`)、修改单元格内容(`text()`)等。例如，当用户点击按钮时添加新行： ```javascript $('#addRow').click(function(){ var newRow = $...
jquery数据统计饼图+表格动态效果现实
05-17
5. **动态效果**: 这个demo中的动态效果可能包括数据的实时更新、图表的动态过渡（如添加、删除或改变数据时饼图的平滑动画）以及用户交互响应（如点击饼图切片后高亮显示相关数据行）。这些效果可以通过jQuery的...
jqGrid（jqueryGrid表格操作demo）
04-18
jqGrid是一款基于jQuery的开源数据网格插件，用于在网页上展示和操作表格数据，它提供了丰富的功能，如数据分页、排序、过滤、编辑、添加、删除等，且具有高度自定义性。这个"jqGrid（jqueryGrid表格操作demo）"是一...
jquery Grid Demo
09-16
jQuery Grid 是一个强大的数据展示和管理工具，它基于 jQuery 库，提供了丰富的功能，包括数据的排序、查询、分页等，使得开发者能够快速构建交互式的表格应用。在本篇文章中，我们将深入探讨 jQuery Grid 的核心...
探索算法迷宫：揭秘寻找最短路径的神兵利器
08-19
数据结构是计算机科学中的一个基本概念，它指的是数据的组织、管理和存储方式，以及对数据的操作。数据结构使得数据的访问和修改更加高效和有序。常见的数据结构包括： 1. **数组**（Array）：一种线性数据结构，可以存储相同类型的元素，并通过索引访问。 2. **链表**（Linked List）：一种线性数据结构，由一系列节点组成，每个节点包含数据部分和指向下一个节点的指针。 3. **栈**（Stack）：一种后进先出（LIFO, Last In First Out）的数据结构，只能在一端进行添加或删除操作。 4. **队列**（Queue）：一种先进先出（FIFO, First In First Out）的数据结构，允许在一端添加元素，在另一端删除元素。 5. **哈希表**（Hash Table）：通过键值对存储数据的数据结构，可以快速地通过键来访问数据。 6. **树**（Tree）：一种层次结构的数据结构，每个节点有零个或多个子节点，通常用于表示具有层次关系的数据。 7. **图**（Graph）：由顶点（节点）和边组成，可以表示复杂的关系和网络结构。 每种数据结构都有其
基于Android习惯养成APP设计与实现.docx
08-19
基于Android习惯养成APP设计与实现.docx
YOLO算法在生物信息学中的创新应用：从基因组到细胞成像
最新发布
08-19
YOLO（You Only Look Once）算法是一种流行的实时目标检测系统，通常用于计算机视觉领域。然而，其原理和效率同样适用于生物信息学领域，特别是在基因组学、蛋白质结构分析和细胞成像等方面。本文将探讨YOLO算法在生物信息学中的多种应用，包括基因组序列识别、蛋白质结构分类和细胞图像分析，并提供相应的代码示例。 YOLO算法在生物信息学领域展现出巨大的潜力，尤其是在需要快速和自动化分析的场景中。随着深度学习技术的不断进步，我们可以预见YOLO算法将在生物信息学中扮演越来越重要的角色。 参考文献 YOLO: Real-Time Object Detection Deep Learning for Bioinformatics 请注意，本文为示例性质，实际编写时需要根据具体主题和要求进行调整和补充。
知识分享辅助工具 - ObsidianPublishToCSDN-V1.1.py
08-19
知识分享辅助工具：ObsidianPublishToCSDN-V1.1.py 简介优化： 告别繁琐，拥抱高效！ObsidianPublishToCSDN-V1.1.py 是专为 Obsidian 用户打造的知识分享利器，旨在将您的笔记内容无缝对接至CSDN平台，让知识分享变得更加轻松快捷。 核心功能亮点： 智能图片提取：自动识别并收集Obsidian笔记中引用的所有图片，一键整理至指定文件夹，无需手动逐一查找，大幅提升发布效率。 Markdown优化转换：精准转换Obsidian的Markdown格式为CSDN兼容格式，保留原有排版与样式，确保内容呈现的专业与美观。 双链处理：特别针对Obsidian的双链特性，提供灵活处理方案，无论是转换为普通链接还是保留注释说明，均可按需配置，让内容更加适应CSDN环境。 高效文档生成：一键生成适用于CSDN发布的Markdown文档，减少手动编辑时间，让您的创意与知识更快触达读者。 持续迭代更新：本工具正处于活跃开发阶段，我们倾听每一位用户的反馈，不断优化功能，修复bug，确保为您提供最稳定、最便捷的使用体验。
电网预测数据集，日期 小时 干球温度 露点温度 湿球温度 湿度 电力负荷 电价
08-19
日期 小时 干球温度 露点温度 湿球温度 湿度 电力负荷 电价
Gen97-RF-Customization-Step-By-Step
08-19
MTK Gen97 关于modem配置流程和文档介绍
植物大战僵尸幼儿园版v0.9安装程序
08-19
”幼儿园版”由菊长大人提供 目前只能算原版PVZ的换皮肤版本，大家就当用一种可爱的方式再玩一遍原版吧。 目前游戏里还有很多BUG，请大家多多包涵。 创作者会在之后的版本继续优化并增加新内容，给大家更好的体验。
基于Android图书馆管理系统APP设计与实现.docx
08-19
基于Android图书馆管理系统APP设计与实现.docx
我们在学习c语言时，我们应该会灵活运用多个编译器，小熊猫c++就是如此
08-19
小熊猫C++是一个面向编程入门和初级用户的C/C++集成开发环境（IDE）。 此安装包已经配置完成，可直接安装，无需配置编译器 已有的C/C++ IDE，要么体积庞大，需要长时间的下载和安装，如VS和Qt Creator
毕业设计，基于SpringBoot+Vue+MySQL开发的海滨体育馆管理系统，源码+数据库+毕业论文+视频演示
08-19
毕业设计，基于SpringBoot+Vue+MySQL开发的海滨体育馆管理系统，源码+数据库+毕业论文+视频演示 本基于Spring Boot的海滨体育馆管理系统设计目标是实现海滨体育馆的信息化管理，提高管理效率，使得海滨体育馆管理工作规范化、高效化。 本文重点阐述了海滨体育馆管理系统的开发过程，以实际运用为开发背景，基于Spring Boot框架，运用了Java技术和MySQL作为系统数据库进行开发，充分保证系统的安全性和稳定性。本系统界面良好，操作简单方便，通过系统概述、系统分析、系统设计、数据库设计、系统测试这几个部分，详细的说明了系统的开发过程，最后并对整个开发过程进行了总结，实现了海滨体育馆相关信息管理的重要功能。 本系统的使用使管理人员从繁重的工作中解脱出来，实现无纸化办公，能够有效的提高海滨体育馆管理效率。 关键词：海滨体育馆管理，Java技术，MySQL数据库，Spring Boot框架 本基于Spring Boot的海滨体育馆管理系统主要实现了管理员功能模块和学生功能模块两大部分，这两大功能模块分别实现的功能如下： （1）管理员功能模块 管理员登录后可对系统进行全面管理操作，包括个人中心、学生管理、器材管理、器材借出管理、器材归还管理、器材分类管理、校队签到管理、进入登记管理、离开登记管理、活动预约管理、灯光保修管理、体育论坛以及系统管理。 （2）学生功能模块 学生在系统前台可查看系统信息，包括首页、器材、体育论坛以及体育资讯等，没有账号的学生可进行注册操作，注册登录后主要功能模块包括个人中心、器材管理、器材借出管理、器材归还管理、校队签到管理、进入登记管理、离开登记管理、活动预约管理。
VisualSVN-Server-3.9.7-windows
08-19
V3.x版本安装时，要选择是【标准版(Standard)】还是【企业版(Enterprise)】 标准版的具备基本的功能，无用户数量限制 企业版的可以使用配置工具configurator V4.x版本开始，使用全新的授权模式 分为三个类别：Community 社区版，Essential 基本版，Enterprise 企业版 【社区版】最多只能创建15个用户 下载网址：https://www.visualsvn.com/server/changes/ 报错：AH01620: Could not open password file: D:/Repositories/htpasswd 解决方法：https://stackoverflow.com/questions/60248318/svn-could-not-open-password-file 操作：D:/Repositories 文件夹属性 - 安全 - 添加【Network Service】用户；用户权限配置【完全控制】
JVC AV-21H1E彩电电路原理图.rar
08-19
JVC AV-21H1E彩电电路原理图
layui数据表格 添加 删除行的实现
04-05
Layui数据表格的添加和删除行可以通过以下步骤实现： 1. 添加行：通过表格的render方法中的done回调函数，在表格渲染完成后，可以通过jQuery或原生JavaScript等方式，向表格中添加行数据。 2. 删除行：通过表格的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值