案例需求:根据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并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素,特别是DIV和Table,并且处理其中的数据。这在Web开发中非常常见,尤其是在构建交互式用户界面时。下面将详细阐述这...
在IT行业中,jQuery是一个非常流行的JavaScript库,它...动态创建和添加HTML元素;拖放事件监听与处理;以及前端与后端的数据交互(Ajax)。这个过程可以帮助开发者创建更富交互性的网页,提供用户自定义布局的功能。
知识点:jQuery动态创建元素和事件绑定 在现代前端开发中,使用JavaScript库如jQuery能够极大地简化网页元素的操作,其中动态创建HTML元素和绑定事件是经常使用到的技术。通过给定的文件信息,我们可以了解到如何...
或者在使用jQuery动态创建div时设置大小: ```javascript var newDiv = $("<div class='draggable' style='width: 200px; height: 150px;'></div>"); ``` 此外,还可以使用CSS类来控制div的大小,这样更容易维护和...
本文将介绍如何使用jQuery来实现动态改变div的宽度和高度。jQuery作为一个快速、小巧、功能丰富的JavaScript库,极大地简化了对DOM的操作,使得修改元素尺寸变得非常简单。 首先,要实现动态改变div的尺寸,我们先...
在网页开发中,jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用jQuery的`show()`、`hide()`、`...
本篇文章将深入讲解如何使用jQuery UI Drag插件来创建可拖动的浮动div,并将其应用于布局排列,以及如何将排序结果保存到数据库。 **1. jQuery UI Drag插件介绍** jQuery UI是基于jQuery库的一个扩展,它提供了...
在网页设计中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,尤其是在处理DOM操作、事件处理和动画...通过研究这些文件,你可以更深入地理解如何使用jQuery来创建动态、交互式的网页元素。
在网页开发中,动态创建和布局div元素是常见的需求,特别是在构建交互式用户界面时。jQuery库因其简洁的API和强大的功能,常被用来处理这样的任务。本篇将深入讲解如何利用jQuery实现div层的自由拖动以及尺寸调整...
// 绑定高度并获得当前隐藏keys(获得当前事件的下一个元素) /** * 显示状态和模块 ...* 动态创建层并添加显示内容 改分页 */ /** * DWR 提交 */ /** * 分页函数 */ /** * 验证 */
在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理和...通过理解和熟练运用这些方法,我们可以创建更动态、更响应式的Web应用。记住,选择正确的事件和优化事件处理是提升用户体验的关键。
总结来说,使用Jquery动态替换div内容及动态展示时,关键点在于选择合适的方法。.text()方法适用于处理纯文本内容,而.append()方法适合于需要HTML内容被解析的场景。在实际应用中,我们还应注意选择正确的时机和...
总的来说,这个项目展示了如何利用jQuery和CSS创建一个动态的、交互式的弹出div层窗口。开发者通过结合HTML、CSS和JavaScript,实现了在用户界面上的增强交互,提供了更丰富的用户体验。这样的技术广泛应用于网页...
在这个“jquery弹出div”的主题中,我们将深入探讨如何利用jQuery来实现一个div元素的弹出效果,这通常用于创建对话框、提示框或者模态窗口。 首先,`div`在HTML中是一个通用的容器元素,用于组织页面内容。我们...
总结来说,jQuery显示和隐藏DIV是网页动态效果的基础,通过简单的API调用可以轻松实现各种交互。这种技术广泛应用于菜单、侧边栏、内容区域的展开与收起,提升用户体验。了解并掌握这些技巧对于任何前端开发者都是...
使用jQuery,我们可以动态创建表格元素。例如,创建一个带有表头的表格: ```javascript var table = $('<table></table>'); var thead = $('<thead></thead>'); var tr = $('<tr></tr>'); // 添加表头...
总的来说,通过结合HTML、CSS和jQuery,我们可以创建一个功能完善的滑动DIV组件,适用于网页和手机应用。这不仅可以展示图片,还可以用于呈现任何类型的内容,比如文本、图表或其他动态数据。随着技术的发展,滑动...
3. **动态显示**:当事件触发时,使用相应的jQuery方法改变div的可见性。 其次,**div的拖动功能**可以通过jQuery UI库中的`draggable()`方法实现。用户可以通过鼠标拖动div来改变其在页面上的位置。在使用此功能时...
标题中的“jQuery插件实现DIV浮动在页面固定位置中”是指使用JavaScript库jQuery来创建一个功能,使得HTML中的<div>元素能保持在用户滚动页面时的特定位置,通常这种效果被称为“固定定位”或者“吸附效果”。...