专栏首页卯金刀GGjquery 动态添加一行数据,支持动态删除

jquery 动态添加一行数据,支持动态删除

简介:

1、隐藏一个模板;

2、使用clone方法;

3、修改clone后的代码;

详细过程:

1、html代码

<tr id="templateTr" style="display: none;"> <td>联系人</td> <td><input type="text" name="conName" disabled="disabled" style="border: 0; background: #fff;box-shadow: none;cursor:text;" class="form-control" ></td> <td>部门</td> <td><input type="text" name="conDepart" disabled="disabled" style="border: 0; background: #fff;box-shadow: none;cursor:text;" class="form-control" ></td> <td>联系电话</td> <td><input type="text" name="conTel" disabled="disabled" style="border: 0; background: #fff;box-shadow: none;cursor:text;" class="form-control" ></td> <td>邮箱</td> <td><input type="text" name="conEmail" disabled="disabled" style="border: 0; background: #fff;box-shadow: none;cursor:text;" class="form-control" ></td> <td><button type="button" class="button2 delrow">删除</button></td> </tr>

2、jquery 方法

//增加联系人 addRow():any{ var $tr = $('#templateTr').clone(true); $tr.attr('id',''); $(".button2.delrow").click(function(){ var $del_tr = $(this).parents("tr"); $del_tr.remove(); }); $('#tab_relInfors tbody').append($tr);//在table表动态添加 $tr.show(); }

3、html页面

<h5>联系方式 <span><button type="button" class="button2 addrow" (click)="addRow()" disabled id="btn_add1" style="margin-left: 50px;margin-right: 28px;">增加</button></span> </h5>

4、一个在原来产品基础上添加产品的添加,主要功能是在原来的序号的基础上,序号动态增长,可以作为参考;

//新增产品 addProductRow():any{ let thiss = this; var $protr=$('#productTemplate').clone(true); $protr.attr('id',''); $(".button2.delrow").click(function(){ var $del_tr = $(this).parents("tr"); $del_tr.remove(); }); if('tbo_hasnopros'==$('#tab_relProducts tbody').attr("id")) { if($('#tab_relProducts tbody tr td').text()=='暂无信息') { $('#tab_relProducts tbody tr').remove(); thiss.orderNum=0; } }else{ thiss.orderNum=$('#tab_relProducts tbody tr:last td:first').text(); } thiss.orderNum++; $protr[0].childNodes[1].innerHTML=thiss.orderNum; $('#tab_relProducts tbody').append($protr); $protr.show(); }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • centos7的安装过程中出现的问题(一)

    1.1 下载Centos7( CentOS-7.0-1406-x86_64-DVD.iso )的ISO安装文件,地址:https://www.centos.or...

    用户5640963
  • oracle修改字段类型时报"要更改的列必须为空"处理方法

    执行以下语句报"要修改数据类型,则要更改的列必须为空" alter table 表名 modify (目标字段 varchar2(100));

    用户5640963
  • 【jquery基础】按钮禁用和启用

    在html标签中设置按钮被禁用,可以使用如下代码 <input type='button' id='test' value='disabled'> 在jqu...

    用户5640963
  • 高并发编程-synchronized深入解析

    对于单一JVM来说,synchronized可以保证在并发情况下,同一时刻只有一个线程执行某个方法或某段代码。synchronized可用于修饰普通方法、静态方...

    JavaQ
  • 生产者消费者

    py3study
  • 3.2.1、Google Tag Manager实战指南—— 容器的导出与导入

    在GTM中,可以将现有的配置导出,然后再导入到其他的容器中,利用这个可以导入别人的配置,看别人的怎么使用GTM或复制同样的配置到其他站点,导入和导出的方法非常简...

    GA小站
  • Linux 下 Bugzilla 的安装及配置

    Bugzilla 是一个基于 Web 的,开源的,用来记录跟踪缺陷数据库的 bug 跟踪软件。它可以管理软件开发中缺陷的提交(new)、修复(resolve)和...

    悠风
  • DM 源码阅读系列文章(三)数据同步处理单元介绍

    本文为 DM 源码阅读系列文章的第三篇,上篇文章 介绍了 DM 的整体架构,DM 组件 DM-master 和 DM-worker 的入口代码,以及两者之间的数...

    PingCAP
  • 告诉你最简单的方式搭建MySQL、Redis、MongoDB数据库

    数据库在我们日常开发中接触是很多的,平时自己没事写一些东西也经常会用到,之前专门写过安装MySQL、Redis、MongoDB的文章,各种安装配置还是比较麻烦的...

    星星在线
  • Java web开发,在一个jsp里放太多java代码的后果,摘自 java web轻量级开发面试教程

    现要做一个简单的登录页面,如果用户通过验证,会显示Welcome用户名的欢迎词,反之则返回登录页面让用户再次输入 这部分的完整代码是JSPDemo项目里的log...

    用户1153489

扫码关注云+社区

领取腾讯云代金券