jqeury 动态删除、添加表格demo

最新推荐文章于 2021-06-25 20:27:38 发布
最新推荐文章于 2021-06-25 20:27:38 发布
阅读量80 收藏
点赞数
文章标签： 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 465
&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给表格动态添加或删除行列
qq_33048333的博客
01-02 6109
点击按钮，动态添加、删除表格特定样式的行列 点击“+”则添加行，点击“-”则删除行（针对多行） 实现效果图 实现 $.addTrTd = function(i){ var rowPost ='&amp;amp;amp;lt;tr&amp;amp;amp;gt;'+ '&amp;amp;amp;lt;td class=&amp;amp;quot;w25-10&amp;amp;quot; colspan=&amp;
jquery html 多行,JQ实现动态添加多行
weixin_42628573的博客
06-25 687
一.实例二.Html代码添加一行三.JQ代码1.添加行$("#addTimeItems_Basics").on("click", function () {var len = $("#GiveTimeGroup_Basics").find("div[id^=‘role_‘]").length;$("#GiveTimeGroup_Basics").append(‘~元赔付元‘);})2.删除行$...
jquery动态表格，动态添加表格行
清山博客
05-09 5365
效果图：（打包下载） Html： html> head>     title>jquery表格操作title>     script language="javascript" src="jquery.table.tr.js">script>     style type="text/css">         table         {             bord
jquery动态生成表格
06-06 911
无标题文档 $(document).ready(function (){ $("#submit").click(function (){ //先获取文本框的值 var $name=$("#name").val(); var $email=$("#email").val(); var $phone=$("#phone").val()...
JQuery动态添加和删除表格行的方法
12-09
本文实例讲述了JQuery动态添加和删除表格行的方法。分享给大家供大家参考。具体分析如下： 昨天做页面表格行动态添加和删除，看了无数的介绍，发现了一个好东东，JQuery。用它实现起来还真的是很方便，这个是我用到...
jQuery动态生成Bootstrap表格
10-21
主要介绍了jQuery动态生成bootstrap表格的相关资料,非常不错具有一定的参考借鉴价值，需要的朋友可以参考下
原生JS和JQuery动态添加、删除表格行的方法
10-24
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
jQuery 动态添加、删除表格行特效
05-12
内容索引:脚本资源,jQuery,动态删除　jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
行政数据分析看板8.xlsx
04-26
Excel数据看板，Excel办公模板，Excel模板下载，Excel数据统计，数据展示
自动驾驶运动规划(Motion Planning).pdf
04-26
自动驾驶运动规划(Motion Planning)问题分析
跟我一起写makefile
04-26
跟我一起写makefile的PDF，学习用。
AI 技术落地有望强化客户运 营.pdf
04-26
AI 技术落地有望强化客户运 营.pdf
公司年会主持词模板.docx
04-26
年会班会资料，节目策划，游戏策划，策划案，策划方案，活动方案，筹办，公司年会，开场白，主持人，策划主题，主持词，小游戏。
weixin103基于h5移动网赚项目微信小程序+springboot后端毕业源码案例设计.zip
04-26
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
labview大作业, 简单的OCR识别, 准确率有待提升.zip
最新发布
04-26
labview 与 C 和BASIC 一样，LabVIEW [2]也是通用的编程系统，有一个完成任何编程任务的庞大函数库。LabVIEW [3]的函数库包括数据采集、GPIB、串口控制、数据分析、数据显示及数据存储，等等。LabVIEW [3]也有传统的程序调试工具，如设置断点、以动画方式显示数据及其子程序（子VI）的结果、单步执行等等，便于程序的调试。 LabVIEW [2]（Laboratory Virtual Instrument Engineering Workbench）是一种用图标代替文本行创建应用程序的图形化编程语言。传统文本编程语言根据语句和指令的先后顺序决定程序执行顺序，而 LabVIEW 则采用数据流编程方式，程序框图中节点之间的数据流向决定了VI及函数的执行顺序。VI指虚拟仪器，是 LabVIEW 的程序模块。 LabVIEW [2] 提供很多外观与传统仪器（如示波器、万用表）类似的控件，可用来方便地创建用户界面。用户界面在 LabVIEW 中被称为前面板。使用图标和连线，可以通过编程对前面板上的对象进行控制。这就是图形化源代码，又称G代码。
【信号去噪】基于无迹卡尔曼滤波UKF实现信号去噪附matlab代码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
MATLAB有意思的项目.zip
04-26
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
jquery 动态添加表格
05-10
可以使用jQuery的`append()`方法动态添加表格。 首先，在HTML文件中添加一个空的表格： ```html <th>Column 1 <th>Column 2 <th>Column 3 ``` 然后，在jQuery中使用`append()`方法添加表格行： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值