`
齐晓威_518
  • 浏览: 618754 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

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

 
阅读更多
  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>   
分享到：
| JQuery自动为表格增加一列
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery动态生成文本框，含删除按钮

    本案例聚焦于使用jQuery动态生成文本框，并且每个文本框都配备有删除按钮。这个功能常见于需要用户输入多条类似信息的场景，如在线表单或任务管理器。 首先，`demo.html`和`demo_1.html`是两个不同的示例页面，展示...

    jQuery文本框创建关键词标签代码

    在本文中，我们将深入探讨如何使用jQuery来创建一个功能丰富的文本框，该文本框能够动态地生成和管理关键词标签。这个功能广泛应用于各种网站，如社交媒体、博客平台、论坛等，帮助用户方便地组织和分类内容。 首先...

    点击增加多个文本框也可以删除

    "点击增加多个文本框也可以删除"这个功能，正如标题和描述所提到的，允许用户根据需求动态添加或移除文本输入框，提供了更好的用户体验和更高的数据录入灵活性。 首先，我们要理解文本框（Text Box）在网页或应用中...

    jQuery文本框输入文字放大预览代码

    《jQuery实现文本框输入文字放大预览效果详解》 在网页设计中，用户交互体验是至关重要的元素之一。为了提升用户的输入体验，一种常见的技术手段是实时预览用户在文本框中输入的文字，例如文字放大预览效果。本文将...

    动态创建多个文本框取值

    6. **客户端脚本交互**：为了实现“任意修改数量”的功能，可能需要使用JavaScript或jQuery等客户端技术，让用户能够增加或删除文本框。这通常涉及到DOM操作，以及与服务器端的异步通信（如AJAX请求）来更新服务器...

    jQuery表单选项动态增加删除代码

    本示例中，我们探讨的主题是“jQuery表单选项动态增加删除代码”，这是一个使用jQuery和特定插件（addel.js）来实现的交互式表单管理功能。这个功能允许用户在运行时动态添加或删除表单输入字段，例如文本框，极大地...

    jquery只能输入数字的文本框插件

    这个“jquery只能输入数字的文本框插件”是为了解决一个常见的用户界面需求：限制用户在特定输入框中只能输入数字，防止非数字字符的输入。这种功能对于处理货币、数量或者任何需要精确数值的数据输入场景尤其有用。...

    一款jquery text文本框添加删除标签代码.zip

    本资源"一款jquery text文本框添加删除标签代码.zip"提供了一个实现用户在文本框中动态添加和删除标签的功能。这个功能在很多现代网站中常见，比如用于输入关键词、兴趣爱好或分类等场景。 首先，让我们了解一下...

    jquery 插件 文本框输入限制 汉字,字母

    本篇文章将深入探讨如何使用jQuery插件来实现文本框(input)的输入限制，仅允许用户输入汉字和字母。 首先，我们需要理解jQuery插件的基本结构。一个简单的jQuery插件通常包含一个函数，该函数接收jQuery对象作为...

    jquery 插件实现多行文本框[textarea]自动高度

    总结来说，这个jQuery插件利用`keyup`事件监听用户的输入行为，通过计算行数和行高动态调整`&lt;textarea&gt;`的高度，实现了多行文本框的自动高度适应。这种实现方式避免了引入额外的第三方插件，简化了项目依赖，同时也...

    利用jQuery来动态为属性添加或者删除属性的简单方法

    总结来说，本文通过一个具体的Web开发场景，说明了如何利用jQuery实现动态属性管理。通过学习和应用本文提供的方法，开发者可以更加灵活地控制网页元素的属性，并满足各种动态交互的需求。同时，通过比较jQuery与...

    JQuery实现表格动态增加行并对新行添加事件

    本示例探讨了如何使用jQuery实现表格动态增加行的功能，并且在新行上添加事件，以提升用户体验和性能。 首先，我们了解目标：创建一个表格，允许用户在表格末尾动态增加空白行，而不是一次性添加大量行，从而避免...

    Jquery 动态添加按钮实现代码

    点击添加 动态添加两个文本框： 分别表示x和y的值，点击取消 删除本行的2个文本框记得要引入jquery.js 代码如下: [removed][removed] [removed] $(function() { $(“#btnMian”).click(function() { //生成 0 到...

    原生JS和JQuery动态添加、删除表格行的方法

    通过上述知识点，我们可以看出原生JavaScript和JQuery在进行表格的动态添加和删除操作时各自有不同的实现方法和优势。原生JavaScript更底层，更灵活，但需要更多的代码；而JQuery则更简洁、易于学习和使用，尤其适合...

    jQuery实现实时输入字数统计

    现在，我们使用jQuery监听`textarea`的`keyup`事件，每当用户在文本框中输入或删除字符时，都会触发这个事件。我们可以在这个事件的回调函数中获取当前的输入字数，并更新`countDisplay`的文本： ```javascript $...

    jquery关于页面焦点的定位(文本框获取焦点时改变样式 )

    实现原理： 在document加载完成后(ready)，添加input的focus和blur事件，并进行增加和删除样式的操作。 代码示例： 代码如下: &lt;html&gt; &lt;head&gt;&lt;title&gt;&lt;/title&gt; &lt;style type=”text/css”&...

    jquery动态增加删除表格行的小例子

    在这个例子中，我们看到了如何使用jQuery来动态地增加和删除HTML表格中的行。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画效果。在这个小例子中，主要涉及了以下jQuery知识点： 1. **jQuery...

    asp.net文本框下拉列表批量删除

    综上所述，"asp.net文本框下拉列表批量删除"涉及了前端交互设计、jQuery操作、Ajax通信、后端处理等多个环节，是ASP.NET开发中一个综合性的功能实现。在实际开发中，需要结合具体业务需求和用户反馈，不断优化和完善...

    jQuery实现文本框邮箱输入自动补全效果

    jQuery 实现文本框邮箱输入自动补全效果是一种常见的前端交互功能，它能够为用户提供便捷的输入体验，尤其是在处理大量预定义的邮箱域名时。在这个示例中，我们将探讨如何使用 jQuery 和一个特定的插件 `jquery....

Magicbox
Global site tag (gtag.js) - Google Analytics