<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-5-1</title>
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $bb=$("#bb");//=$("#bb").remove();
var $cc=$("#cc").remove();
var $dd=$("#dd").remove();
var va;
$("#yy").change(function(){
if(this.value=="bb"){
$bb.appendTo("#aa"); //$bb.appendTo("#aa"); 即使是多次重复的插入,结果还是不变的。什么??
if(va=="cc"){
$cc=$("#cc").remove();
}else if(va=="dd"){
$dd=$("#dd").remove();
}
}else if(this.value=="cc"){
$cc.appendTo("#aa");
if(va=="bb"||va==""){
$bb=$("#bb").remove();
}else if(va=="dd"){
$dd=$("#dd").remove();
}
}else if(this.value=="dd"){
if(va=="bb"||va==""){
$bb=$("#bb").remove();
}else if(va=="cc"){
$cc=$("#cc").remove();
}
$dd.appendTo("#aa");
}else if(this.value==""){
if(va=="bb"){
}else {
$bb.appendTo("#aa");
if(va=="cc") {
$cc=$("#cc").remove();
}else if(va=="dd"){
$dd=$("#dd").remove();
}
}
}
})
$("#yy").click(function(){
va=this.value;
})
});
</script>
</head>
<body>
<select id="yy">
<option value="" selected >-----</option>
<option value="bb" >bb</option>
<option value="cc" >cc</option>
<option value="dd">dd</option>
</select>
<table>
<tr id="aa">
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr id="bb">
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr id="cc">
<td>cc</td>
<td>cc</td>
<td>cc</td>
</tr>
<tr id="dd">
<td>dd</td>
<td>dd</td>
<td>dd</td>
</tr>
<tr id="ee">
<td>EE</td>
<td>EE</td>
<td>EE</td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循...
2. **数据处理**:在后端或前端(取决于应用架构)生成一个新的空记录或默认值记录。 3. **DOM操作**:将新记录转化为HTML行,并插入到表格的适当位置。 4. **事件绑定**:确保新添加的行同样具有与其他行相同的交互...
添加操作涉及到在表格中插入新行,并设置一些默认值。 4. **保存操作**: - 保存操作则需要收集所有进行过的增加、修改和删除操作,并将这些变更统一进行验证和保存。其中涉及到`getChanges`方法,该方法可以获取...
【jQuery无限层级下拉框】是一种交互式的网页元素,它允许用户从一系列级联的下拉菜单中选择值,这些菜单可以无限扩展,通常用于表示层次结构的数据,例如地区、组织结构或产品分类。实现这一功能的核心是利用jQuery...
本篇文章将探讨如何创建一个名为`autoAdd`的jQuery插件,该插件专注于自动添加和删除行的功能。首先,让我们了解基础的结构。 创建jQuery插件的基本步骤是封装jQuery对象,以确保插件的兼容性和可调用性。这是通过...
6. **DOM操作**:创建、删除和修改DOM元素是jQuery插件中的常见任务。弹幕可能以`<div>`或其他HTML元素的形式插入到页面中,并根据需要更新样式以达到预期效果。 7. **插件结构**:一个良好的jQuery插件应该遵循...
### jQuery 源码分析:深入理解jQuery.support 在前端开发中,浏览器兼容性问题是一个长期存在的挑战。随着互联网的快速发展,各种不同的浏览器层出不穷,每种浏览器都有自己的特性和Bug。为了帮助开发者屏蔽这些...
2. 在新的行中填充默认值,如“新建分类”。 3. 添加必要的事件监听器,比如点击按钮时触发添加操作。 4. 将新的分类信息插入到数据源(可能是数组或数据库)。 5. 更新表格显示以反映新的分类。 删除分类可能涉及...
### Extjs、Jquery、Dhtmlxtree之上树的区别及方法变更详解 #### 一、概述 本篇文章主要探讨了三种流行的JavaScript库——Extjs、Jquery、Dhtmlxtree中实现树形结构(Tree)的方法及其差异。树形结构在用户界面...
默认值为false,意味着脚本不会被执行。如果设置为true,解析的HTML中的脚本将保持不变,可以执行。出于安全考虑,通常建议保持默认值,避免潜在的安全风险。 **安全考虑** `jQuery.parseHTML()` 不会执行解析后的...
9. **is()**:`is()`用于验证元素是否满足特定条件,如`$("#element").is(":empty")`判断元素是否为空。 10. **index()**:`index()`返回元素在兄弟元素中的位置,无序集则返回元素在集合中的索引。 11. **事件...
本文介绍的案例涵盖了从基础的元素操作到复杂的事件处理,为使用jQuery进行Web前端开发的人员提供了一系列实用的示例和技巧,极大地方便了日常开发工作。读者通过学习这些案例,可以提高对jQuery框架的理解并应用到...
总结来说,解决Ajax传递为空但显示在页面上为undefined的问题,关键在于前端对于数据的处理。确保在将数据渲染到页面上之前,对数据进行正确的判断和处理。如果问题频繁出现,可能需要后端开发人员关注数据模型的...
1.2 jQuery为什么如此出色 1.3 jQuery项目历史 1.4 第一个jQuery驱动的页面 1.4.1 下载jQuery 1.4.2 建立HTML文档 1.4.3 编写jQuery代码 1.4.4 最终结果 1.5 小结 第2章 选择符 2.1 DOM 2.2 工厂函数$() ...
- 使用`insertRow()`方法在表格末尾插入新行,返回新行对象`objNewRow`,并为其分配唯一的ID,如`objTable.rows.length-1`。 - 遍历模板行的每个单元格(cell),使用`insertCell()`方法在新行中插入相应数量的...
总的来说,动态多级联动多级城市JQ插件selectlinkagejq是JavaScript开发中的一个实用工具,它结合了jQuery的便利性和Ajax的动态加载能力,为用户提供了流畅的多级选择体验。通过理解和应用这类插件,开发者能够更好...
3. **DOM操作**:利用jQuery对DOM进行操作,包括添加、删除元素等。 4. **事件绑定**:为每个下拉框绑定相应的事件处理器,以响应用户的操作。 5. **数据格式化**:从服务器返回的数据需要转换成HTML `<option>` ...
- **insertRow**: 在指定位置插入一行数据。 - **updateRow**: 更新指定行数据。 - **deleteRow**: 删除指定行数据。 **2.1.4. 事件** - **onBeforeLoad**: 加载数据前触发。 - **onLoadSuccess**: 加载数据成功后...