`

jquery 删除,插入行,默认值为空

阅读更多
<!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详细教程

    jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循...

    表格行记录动态增加和删除

    2. **数据处理**:在后端或前端(取决于应用架构)生成一个新的空记录或默认值记录。 3. **DOM操作**:将新记录转化为HTML行,并插入到表格的适当位置。 4. **事件绑定**:确保新添加的行同样具有与其他行相同的交互...

    jquery Easyui Datagrid实现批量操作(编辑,删除,添加)

    添加操作涉及到在表格中插入新行,并设置一些默认值。 4. **保存操作**: - 保存操作则需要收集所有进行过的增加、修改和删除操作,并将这些变更统一进行验证和保存。其中涉及到`getChanges`方法,该方法可以获取...

    jQuery无限层级下拉框

    【jQuery无限层级下拉框】是一种交互式的网页元素,它允许用户从一系列级联的下拉菜单中选择值,这些菜单可以无限扩展,通常用于表示层次结构的数据,例如地区、组织结构或产品分类。实现这一功能的核心是利用jQuery...

    自己动手制作jquery插件之自动添加删除行的实现

    本篇文章将探讨如何创建一个名为`autoAdd`的jQuery插件,该插件专注于自动添加和删除行的功能。首先,让我们了解基础的结构。 创建jQuery插件的基本步骤是封装jQuery对象,以确保插件的兼容性和可调用性。这是通过...

    使用jQuery自定义视频弹幕插件.zip

    6. **DOM操作**:创建、删除和修改DOM元素是jQuery插件中的常见任务。弹幕可能以`&lt;div&gt;`或其他HTML元素的形式插入到页面中,并根据需要更新样式以达到预期效果。 7. **插件结构**:一个良好的jQuery插件应该遵循...

    jQuery 源码分析笔记(5) jQuery.support

    ### jQuery 源码分析:深入理解jQuery.support 在前端开发中,浏览器兼容性问题是一个长期存在的挑战。随着互联网的快速发展,各种不同的浏览器层出不穷,每种浏览器都有自己的特性和Bug。为了帮助开发者屏蔽这些...

    jQuery添加删除分类编辑代码

    2. 在新的行中填充默认值,如“新建分类”。 3. 添加必要的事件监听器,比如点击按钮时触发添加操作。 4. 将新的分类信息插入到数据源(可能是数组或数据库)。 5. 更新表格显示以反映新的分类。 删除分类可能涉及...

    Extjs,Jquery,Dhtmlxtree之上的树

    ### Extjs、Jquery、Dhtmlxtree之上树的区别及方法变更详解 #### 一、概述 本篇文章主要探讨了三种流行的JavaScript库——Extjs、Jquery、Dhtmlxtree中实现树形结构(Tree)的方法及其差异。树形结构在用户界面...

    jQuery.parseHTML() 函数详解

    默认值为false,意味着脚本不会被执行。如果设置为true,解析的HTML中的脚本将保持不变,可以执行。出于安全考虑,通常建议保持默认值,避免潜在的安全风险。 **安全考虑** `jQuery.parseHTML()` 不会执行解析后的...

    60个实用的jQuery代码片段.pdf

    9. **is()**:`is()`用于验证元素是否满足特定条件,如`$("#element").is(":empty")`判断元素是否为空。 10. **index()**:`index()`返回元素在兄弟元素中的位置,无序集则返回元素在集合中的索引。 11. **事件...

    jQuery 常见小例汇总

    本文介绍的案例涵盖了从基础的元素操作到复杂的事件处理,为使用jQuery进行Web前端开发的人员提供了一系列实用的示例和技巧,极大地方便了日常开发工作。读者通过学习这些案例,可以提高对jQuery框架的理解并应用到...

    快速解决ajax传递为空但显示在页面上为undefined的问题

    总结来说,解决Ajax传递为空但显示在页面上为undefined的问题,关键在于前端对于数据的处理。确保在将数据渲染到页面上之前,对数据进行正确的判断和处理。如果问题频繁出现,可能需要后端开发人员关注数据模型的...

    Jqury基础教程

    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 工厂函数$() ...

    通过js动态操作table(新增,删除相关列信息)

    - 使用`insertRow()`方法在表格末尾插入新行,返回新行对象`objNewRow`,并为其分配唯一的ID,如`objTable.rows.length-1`。 - 遍历模板行的每个单元格(cell),使用`insertCell()`方法在新行中插入相应数量的...

    动态多级联动多级城市JQ插件selectlinkagejq

    总的来说,动态多级联动多级城市JQ插件selectlinkagejq是JavaScript开发中的一个实用工具,它结合了jQuery的便利性和Ajax的动态加载能力,为用户提供了流畅的多级选择体验。通过理解和应用这类插件,开发者能够更好...

    省市县三级下拉框级联

    3. **DOM操作**:利用jQuery对DOM进行操作,包括添加、删除元素等。 4. **事件绑定**:为每个下拉框绑定相应的事件处理器,以响应用户的操作。 5. **数据格式化**:从服务器返回的数据需要转换成HTML `&lt;option&gt;` ...

    JEECG UI标签库帮助文档v3.3

    - **insertRow**: 在指定位置插入一行数据。 - **updateRow**: 更新指定行数据。 - **deleteRow**: 删除指定行数据。 **2.1.4. 事件** - **onBeforeLoad**: 加载数据前触发。 - **onLoadSuccess**: 加载数据成功后...

Global site tag (gtag.js) - Google Analytics