`
axeking1983
  • 浏览: 30601 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jqeury 动态创建div

阅读更多

案例需求:根据select的option所选值,确定div的生成个数

 

jquery代码:

function choosePersonNum(num)
 {
  $(".temp").remove();
  for(var i=1;i<num;i++)
  {
   var div = $("#templete");
   var newDiv = div.clone(true);
   newDiv.addClass("temp");
   newDiv.insertAfter(div);
   newDiv.show();
  }
                     
 }

 

html代码

<div class="subnav_load_table_c" id="templete">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td><span class="subnav_load_table_span">人员姓名:</span>
                        <input type="text" name="textfield2" class="subnav_load_table03" />                       
                        <span class="subnav_load_table_sgin">*</span></td>
                      <td><span class="subnav_load_table_span">手 机:</span>
                        <input type="text" name="textfield2" class="subnav_load_table04" />                       
                        <span class="subnav_load_table_sgin">*</span></td>
                      <td><span class="subnav_load_table_span">办公电话:</span>
                        <input type="text" name="textfield2" class="subnav_load_table04" />                       
                        <span class="subnav_load_table_sgin">*</span></td>
                    </tr>
                    <tr>
                      <td><span class="subnav_load_table_span">职务分类:</span>
                        <select name="select">
                        <option>总经理助理</option>
                        </select>
                            <span class="subnav_load_table_span">职务名称:</span> <input type="text"     name="textfield2" class="subnav_load_table04" />                       
                        <span class="subnav_load_table_sgin">*</span></td>
                      <td><span class="subnav_load_table_span">传 真:</span>
                        <input type="text" name="textfield2" class="subnav_load_table04" />                       
                        <span class="subnav_load_table_sgin">*</span></td>
                      <td><span class="subnav_load_table_span">电子邮箱:</span>
                        <input type="text" name="textfield2" class="subnav_load_table04" />                       
                        <span class="subnav_load_table_sgin">*</span></td>
                    </tr>
                  </table>
    </div>

 

建立templete模板,然后每次点击select的时候,都要清除一下上次生成的div,这样就不会叠加了

分享到:
评论

相关推荐

    JQuery 动态生成DIV、Table并处理数据

    标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素,特别是DIV和Table,并且处理其中的数据。这在Web开发中非常常见,尤其是在构建交互式用户界面时。下面将详细阐述这...

    jquery 拖拽动态添加div 保存拖拽后的效果

    在IT行业中,jQuery是一个非常流行的JavaScript库,它...动态创建和添加HTML元素;拖放事件监听与处理;以及前端与后端的数据交互(Ajax)。这个过程可以帮助开发者创建更富交互性的网页,提供用户自定义布局的功能。

    jquery动态创建div与input的实例代码

    知识点:jQuery动态创建元素和事件绑定 在现代前端开发中,使用JavaScript库如jQuery能够极大地简化网页元素的操作,其中动态创建HTML元素和绑定事件是经常使用到的技术。通过给定的文件信息,我们可以了解到如何...

    jQuery拖动div元素标签

    或者在使用jQuery动态创建div时设置大小: ```javascript var newDiv = $("&lt;div class='draggable' style='width: 200px; height: 150px;'&gt;&lt;/div&gt;"); ``` 此外,还可以使用CSS类来控制div的大小,这样更容易维护和...

    jquery实现动态改变div宽度和高度

    本文将介绍如何使用jQuery来实现动态改变div的宽度和高度。jQuery作为一个快速、小巧、功能丰富的JavaScript库,极大地简化了对DOM的操作,使得修改元素尺寸变得非常简单。 首先,要实现动态改变div的尺寸,我们先...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    在网页开发中,jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用jQuery的`show()`、`hide()`、`...

    jQuery ui drag插件实现浮动div拖动排列布局代码

    本篇文章将深入讲解如何使用jQuery UI Drag插件来创建可拖动的浮动div,并将其应用于布局排列,以及如何将排序结果保存到数据库。 **1. jQuery UI Drag插件介绍** jQuery UI是基于jQuery库的一个扩展,它提供了...

    JQuery-DIV弹窗

    在网页设计中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,尤其是在处理DOM操作、事件处理和动画...通过研究这些文件,你可以更深入地理解如何使用jQuery来创建动态、交互式的网页元素。

    jQuery创建div层自由拖动布局代码

    在网页开发中,动态创建和布局div元素是常见的需求,特别是在构建交互式用户界面时。jQuery库因其简洁的API和强大的功能,常被用来处理这样的任务。本篇将深入讲解如何利用jQuery实现div层的自由拖动以及尺寸调整...

    JQuery 动态生成DIV、Table并处理数据,DWR与后台交互

    // 绑定高度并获得当前隐藏keys(获得当前事件的下一个元素) /** * 显示状态和模块 ...* 动态创建层并添加显示内容 改分页 */ /** * DWR 提交 */ /** * 分页函数 */ /** * 验证 */

    jquery监听DIV的事件

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理和...通过理解和熟练运用这些方法,我们可以创建更动态、更响应式的Web应用。记住,选择正确的事件和优化事件处理是提升用户体验的关键。

    Jquery动态替换div内容及动态展示的方法

    总结来说,使用Jquery动态替换div内容及动态展示时,关键点在于选择合适的方法。.text()方法适用于处理纯文本内容,而.append()方法适合于需要HTML内容被解析的场景。在实际应用中,我们还应注意选择正确的时机和...

    JQUery弹出div层窗口,附带jquery的js文件,可以直接运行

    总的来说,这个项目展示了如何利用jQuery和CSS创建一个动态的、交互式的弹出div层窗口。开发者通过结合HTML、CSS和JavaScript,实现了在用户界面上的增强交互,提供了更丰富的用户体验。这样的技术广泛应用于网页...

    jquery弹出div

    在这个“jquery弹出div”的主题中,我们将深入探讨如何利用jQuery来实现一个div元素的弹出效果,这通常用于创建对话框、提示框或者模态窗口。 首先,`div`在HTML中是一个通用的容器元素,用于组织页面内容。我们...

    jQuery显示隐藏DIV简单实例.zip

    总结来说,jQuery显示和隐藏DIV是网页动态效果的基础,通过简单的API调用可以轻松实现各种交互。这种技术广泛应用于菜单、侧边栏、内容区域的展开与收起,提升用户体验。了解并掌握这些技巧对于任何前端开发者都是...

    Jquery创建动态表格

    使用jQuery,我们可以动态创建表格元素。例如,创建一个带有表头的表格: ```javascript var table = $('&lt;table&gt;&lt;/table&gt;'); var thead = $('&lt;thead&gt;&lt;/thead&gt;'); var tr = $('&lt;tr&gt;&lt;/tr&gt;'); // 添加表头...

    jquery 滑动DIV

    总的来说,通过结合HTML、CSS和jQuery,我们可以创建一个功能完善的滑动DIV组件,适用于网页和手机应用。这不仅可以展示图片,还可以用于呈现任何类型的内容,比如文本、图表或其他动态数据。随着技术的发展,滑动...

    jquery弹出div+异步加载数据

    3. **动态显示**:当事件触发时,使用相应的jQuery方法改变div的可见性。 其次,**div的拖动功能**可以通过jQuery UI库中的`draggable()`方法实现。用户可以通过鼠标拖动div来改变其在页面上的位置。在使用此功能时...

    jQuery插件实现DIV浮动在页面固定位置中

    标题中的“jQuery插件实现DIV浮动在页面固定位置中”是指使用JavaScript库jQuery来创建一个功能,使得HTML中的&lt;div&gt;元素能保持在用户滚动页面时的特定位置,通常这种效果被称为“固定定位”或者“吸附效果”。...

Global site tag (gtag.js) - Google Analytics