JQuery实现动态增加和删除文本框

最新推荐文章于 2024-07-23 11:32:13 发布
最新推荐文章于 2024-07-23 11:32:13 发布
阅读量6k 收藏 1
点赞数
分类专栏： JavaScript/JQuery/AJAX 文章标签： jquery javascript
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
  5. <title>Untitled Document</title>  
  6. <mce:script type="text/javascript" src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script>  
  7. <mce:script type="text/javascript"><!--  
  8. $(function(){  
  9.  var i = 2;  
  10.  $('#addTextImput').click(function(){  
  11.   if(i < 100) {  
  12.    $('#main').append('<div><input type="text" name="text" + i + ""/><input type="button" id="del-text" value="删除"></div>');  
  13.    i++;  
  14.   } else {  
  15.    alert("最多加100个");  
  16.   }  
  17.     
  18.  });  
  19.  $('.del-text').live('click',function(){  
  20.  $(this).parent().remove();  
  21.  i--;  
  22.  });  
  23.  $('#del-text').live('click',function(){  
  24.  $(this).parent().remove();  
  25.  i--;  
  26.  });  
  27. });  
  28. // --></mce:script>  
  29. </head>  
  30. <body>  
  31. <div id="main">  
  32.  <div><input type="text" name="text1"/></div>  
  33. </div>  
  34.   
  35. <input  type="button" id="addTextImput" value="添加"/>  
  36. </body>  
  37. </html>   

ysyn1209
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现动态添加文本框和下拉框效果
07-03
jquery实现动态添加文本框和下拉框效果。
jquery 动态添加 文本框
weixin_30527143的博客
07-15 96
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <META http-equiv="Content-Style-Type" content="text/css"> <script t...
vue elementui 动态追加下拉框、输入框
Z18834071903的博客
04-26 1765
vue elementui 动态追加下拉框、输入框
如何使用jQuery动态添加/删除文本框
一名可爱的技术搬运工
05-21 682
在jQuery中，动态添加或删除文本框非常容易。 这个想法很简单，只需结合使用'counter '变量，jQuery createElement（） ， html（）和remove（）方法即可。 参见以下示例： jQuery动态文本框示例 <html> <head> <title>jQuery add / remove textbox example&...
使用jquery实现动态添加文本框
weixin_34281477的博客
10-18 909
<!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><meta htt...
JQuery实现表格动态增加行并对新行添加事件
10-25
本示例探讨了如何使用jQuery实现表格动态增加行的功能，并且在新行上添加事件，以提升用户体验和性能。 首先，我们了解目标：创建一个表格，允许用户在表格末尾动态增加空白行，而不是一次性添加大量行，从而避免...
Jquery 动态添加按钮实现代码
01-19
点击添加 动态添加两个文本框： 分别表示x和y的值，点击取消 删除本行的2个文本框记得要引入jquery.js 代码如下: [removed][removed] [removed] $(function() { $(“#btnMian”).click(function() { //生成 0 到...
jquery动态生成文本框，含删除按钮
10-17
本案例聚焦于使用jQuery动态生成文本框，并且每个文本框都配备有删除按钮。这个功能常见于需要用户输入多条类似信息的场景，如在线表单或任务管理器。 首先，`demo.html`和`demo_1.html`是两个不同的示例页面，展示...
jquery 插件实现多行文本框[textarea]自动高度
10-24
总结来说，这个jQuery插件利用`keyup`事件监听用户的输入行为，通过计算行数和行高动态调整`<textarea>`的高度，实现了多行文本框的自动高度适应。这种实现方式避免了引入额外的第三方插件，简化了项目依赖，同时也...
jquery动态增加删除表格行的小例子
10-26
在这个例子中，我们看到了如何使用jQuery来动态地增加和删除HTML表格中的行。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画效果。在这个小例子中，主要涉及了以下jQuery知识点： 1. **jQuery...
jquery动态增加输入框
03-21
NULL 博文链接：https://houdonghui1987.iteye.com/blog/981746
jQuery实现动态添加和删除input框实例代码
01-21
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>选项</title> [removed][removed] [removed] $(function(){ // 添加选项 $(#opbtn).click(function(){ if($(#opts>li).size() < 6){// 最多添加6个选项
jquery 动态添加及删除文本框
fytcm的专栏
11-18 246
Untitled Document $(function(){ var i = 2; $('#addTextImput').click(function(){ if(i < 5) { $('#main').append('del'); i++; } else { alert("最多加4个"); } }); ...
jquery动态增加多行文本框并计算值
09-20 576
jquery动态增加多行文本框并计算值。
jQuery动态添加input框
热门推荐
qq_39503366的博客
07-27 1万+
bootstrap和jQuery实现 实现效果如下： 点击加号进行添加，点击减号删除行，鄙人前端技术不太好，头铁写的 HTML代码如下： <div id="index-div"> </div> HTML代码其实就是个div盒子，也可以给一个初始化的文本框 重头是js的代码： 进入页面： $(function () { var...
jquery 动态添加、按顺序添加input文本框并且实现删除操作
年华
11-01 1万+
1.先来一张图来告诉我们今天要实现什么 蓝色加号按钮点击就会动态添加一行“发明人N姓名”和“发明人N排名” 的input文本框还有图片”“  点击蓝色按钮减号就会减少相对应的那一行还有索引也会减掉图片”“ 2.首先 “发明人1姓名” 和 ”发明人1排名“是html要有的，然后点击加号按钮才会动态添加 贴出html 代码 [html] view plai
jQuery点击按钮，生成或者删除inpu数组输入框
独乐乐不如众乐乐
05-27 389
需求点击添加按钮，生成input数组输入框，如果上一个输入框为空，则弹出提示框提示，若不为空，则生成一行input框，最后一个不可以删除，对于数组传值要注意，id唯一，获取值的时候要注意空值的判断，把数组转为对象便于后台接收，但是后台接收对象需要添加注解@RequestBody。 <!DOCTYPE > <html> <head> <meta cha...
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
最新发布
Gusha_的博客
07-23 720
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
JQuery实现网页表格动态增加与删除内容
05-25
JQuery是一个JavaScript库，可以用它来方便地操作HTML元素。以下是一个简单的示例，演示如何使用JQuery实现网页表格动态增加和删除内容。 首先，我们需要在HTML文件中引入JQuery库： ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` 然后，我们可以在HTML文件中创建一个空的表格，并为其添加一个按钮，用于动态增加表格行： ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> </tbody> </table> <button id="addRowBtn">Add Row</button> ``` 接下来，我们可以使用以下JQuery代码来实现动态增加表格行的功能： ```javascript $(document).ready(function() { // 给按钮添加点击事件 $('#addRowBtn').click(function() { // 创建一个新的表格行 var newRow = $('<tr>'); // 创建三个新的表格单元格，并为其添加数据 var nameCell = $('<td>').text('New Name'); var ageCell = $('<td>').text('New Age'); var genderCell = $('<td>').text('New Gender'); // 将这些单元格添加到新的表格行中 newRow.append(nameCell); newRow.append(ageCell); newRow.append(genderCell); // 将新的表格行添加到表格的tbody中 $('#myTable tbody').append(newRow); }); }); ``` 以上代码中，我们首先使用`$(document).ready()`来确保页面加载完毕后再执行代码。然后，我们给按钮添加了一个点击事件，当用户点击按钮时，我们会创建一个新的表格行，并向其中添加三个单元格，然后将新的表格行添加到表格的tbody中。 接下来，我们可以使用以下JQuery代码来实现动态删除表格行的功能： ```javascript $(document).ready(function() { // 给表格行添加点击事件 $('#myTable tbody').on('click', 'tr', function() { // 移除被点击的表格行 $(this).remove(); }); }); ``` 以上代码中，我们使用了JQuery的`on()`方法来为表格的tbody中的所有表格行添加一个点击事件。当用户点击任何一个表格行时，我们会将该表格行从DOM中移除。 综上所述，以上代码演示了如何使用JQuery实现网页表格动态增加和删除内容的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值