`

jquery之div添加取消及内容替换demo

阅读更多

    最近项目中会经常应用到jQuery,配合具体案例,简单介绍一下jQuery之div内容添加、取消及相关内容替换等应用技巧。

    案例:添加院校信息,并同时添加分校信息(存在分校时,可以添加,并且可以添加多个,填写错误可以取消,并可以对添加分校名自动编号1,2,3...)

    首先将jquery.js文件引入,<script type="text/javascript" src="./jquery.js" ></script>.

 

//院校信息添加

<table>
  <tr>
    <td align="right">培训机构名:</td>
    <td><input type="text" name="school_name" /></td>
  </tr>
  <tr>
    <td align="right">培训科目:</td>
    <td><input type="text" name="school_subject" /></td>
  </tr>
  <tr>
    <td align="right">培训对象:</td>
    <td><input type="text" name="school_trainee" /></td>
  </tr>
  <tr>
    <td align="right">地  区:</td>
    <td><input type="text" name="area" /></td>
  </tr>
  <tr>
    <td align="right">地  址:</td>
    <td><input type="text" name="address" /></td>
  </tr>
  <tr>
    <td align="right">交通情况:</td>
    <td><input type="text" name="traffic" /></td>
  </tr>
  <tr>
    <td align="right">联系人:</td>
    <td><input type="text" name="linkman" /></td>
  </tr>
   <tr>
    <td align="right">联系方式:</td>
    <td><input type="text" name="contact" /></td>
  </tr>
  <tr>
    <td align="right">营业执照:</td>
    <td><input type="file" name="license" /></td>
  </tr>
  <tr>
    <td align="right">校区介绍:</td>
    <td><input type="textarea" cols=16 rows=6 name="school_describ" /></td>
  </tr>
</table>


//是否添加分机构

<input type="checkbox" id="school" onclick="show()"/>如果你有分支机构,请填写。


//分机构信息填写

<div id="Objall">
<div id="divObj">
<div id="Objtable">

<table>
  <tr>
    <td>分支机构1名:</td>
    <td><input type="text" name="department_name[]" /></td>
  </tr>
  <tr>
    <td>地区:</td>
    <td><input type="text" name="department_area[]" /></td>
  </tr>
  <tr>
    <td>地址:</td>
    <td><input type="text" name="department_address[]" /></td>
  </tr>
  <tr>
    <td>联系人:</td>
    <td><input type="text" name="department_linkman[]" /></td>
  </tr>
   <tr>
    <td>联系方式:</td>
    <td><input type="text" name="department_contact[]" /></td>
  </tr>
  <tr>
    <td colspan="2"><hr color="gray"></td>
  </tr>
</table>

</div>
</div>
<a href="#" onclick="addshow()">再添加一个分支机构</a>
<a href="#" onclick="cancel()">取消添加</a>
</div >


//form表单确认、取消

<input type="submit" value="确认"/><input type="button" value="取消" onclick="history.go(-1);"/>

 

//jQuery控制代码

<script language="javascript">

//默认执行
$(document).ready(  function(){
        $("#Objall").hide();
        $("#school").removeAttr("checked");//取消选中
    });

    //显示添加分机构
    function show(){
        if($("#school").attr("checked")==true){
            $("#Objall").show();
        }else{
            $("#Objall").hide();
        }
    }

    //取消添加
    if(i == 1){
            $("#Objall").hide();
            $("#school").removeAttr("checked");//取消选中
        }else{
            $("#Objtable"+i+"").remove();
            i = i-1;
        }

    //继续添加显示,同时替换1,使之随添加内容增加而递增
    var i =1;
    function addshow(){
        i = i+1;
        var aa=$("#Objtable").html();
        aa = "<div id= Objtable"+i+" >" + aa + "</div>";
        aa=aa.replace('1',i);
        $("#divObj").append(aa);
    }
</script>
 


      由于初期附件中demo功能可能有不完善之处,现在已做了更新,能更好的体现JQuery的灵活控制的魅力,欢迎大家下载研究,有不妥之处还请不吝赐教,谢谢 ...

 

0
1
分享到:
评论

相关推荐

    jquery之div添加取消及内容替换demo.rar

    本示例“jquery之div添加取消及内容替换demo.rar”旨在为初学者提供一个关于如何使用jQuery操作div元素的教程,包括添加、移除div以及替换其内容的方法。 首先,`jquery.js`是jQuery库的核心文件,它是实现这些功能...

    div模拟下拉菜单(select)jquery插件.gz

    在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中,包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先,`demo.html`是演示页面,它展示了如何在实际项目中应用这个插件。这个页面会包含一...

    jquery 入门demo

    《jQuery入门Demo详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,以其简洁的API、强大的功能和广泛的浏览器兼容性赢得了开发者们的...希望这个jQuery入门Demo能帮助你快速上手,开启精彩的Web开发之旅。

    Jquery操作xml_Demo

    如果你的项目中已经有了 jQuery 文件,可以替换为本地路径。 **2. 创建 XML 文件** 在本例中,我们有一个名为 `xml` 的文件,其中包含 XML 数据。例如: ```xml &lt;title&gt;JavaScript高级程序设计 &lt;author&gt;John...

    demo jquery分页

    jQuery 分页是一种常见的网页交互功能,它用于在大量数据中分块显示内容,提高网页加载速度,提升用户体验。本示例“demo jquery分页”旨在教你如何使用jQuery库实现一个基本的分页功能。 首先,我们需要理解分页的...

    jquery前台模板demo(很实用的)

    "jQuery前台模板demo"就是这样一个实用的工具,它结合了jQuery的强大功能和易用性,为前端设计提供了一套便捷的解决方案。 **一、jQuery简介** jQuery是一款高效、简洁的JavaScript库,它简化了HTML文档遍历、事件...

    demo47-jQuery冲突问题

    ### demo47-jQuery冲突问题 #### 背景与概念 在JavaScript开发过程中,特别是在引入了多个库或框架的情况下,经常会遇到命名空间冲突的问题。其中最常见的一种情况就是不同库都使用了相同的变量名 `$` 作为其主要...

    图片替换demo

    "图片替换demo"这个项目就是一个展示如何在网页中实现图片切换效果的例子。通过这个压缩包,我们可以学习到一些关于图片切换的关键知识点,包括HTML、CSS以及JavaScript的应用。 1. **HTML基础**:HTML(超文本标记...

    jqyuery用法实例,各种jquery方法写的demo

    - `$(selector).append()`: 在元素末尾添加新的内容。 - `$(selector).prepend()`: 在元素开头插入新的内容。 - `$(selector).remove()`: 删除匹配的元素。 2. **事件处理**: - `$(selector).click(function()...

    jquery选卡切换案例

    在网页设计和开发中,选卡切换...在实际操作中,只需替换示例中的内容变量,即可将这些选卡无缝集成到任何网站中。这个案例对于初学者和有经验的开发者来说都是一个很好的学习资源,既能够提高技能,也能提高工作效率。

    jQuery详细教程

    当我们在教程中演示 jQuery 时,会将函数直接添加到 &lt;head&gt; 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件): 实例 &lt;script type="text/javascript" src="jquery.js"&gt; ...

    JQuery的小小总结

    - **页面元素操作**:添加、删除或替换DOM元素。 - **操作页面元素的属性**:读取或修改元素的属性。 - **CSS操作**:更改元素的样式。 - **Ajax**:发送异步HTTP请求。 - **遍历集合**:遍历元素集合。 - **数据流...

    jQuery遮罩Loading加载特效

    **jQuery遮罩Loading加载特效**是网页开发中常用的一种用户体验优化技术,主要用于在页面内容加载过程中展示一个半透明的遮罩层,同时显示一个“加载中”的提示图标或文字,以告知用户页面正在处理数据,避免用户在...

    jquery选项卡

    在`demo.html`中,你需要在部分添加jQuery库和jQuery UI的链接。例如: ```html &lt;script src="https://code.jquery.com/jquery-3.x.y.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="https://code.jquery....

    jquery.json-viewer示例

    请注意,这里你需要将 "x.y" 替换为实际的jQuery版本号。 接着,你需要引入jQuery JSON Viewer的JavaScript和CSS文件。通常,这些文件可以从项目的GitHub仓库下载或通过CDN获取。例如: ```html ...

    WEB开发 之 jQuery - AJAX load() 方法.docx

    这里,`#div1`是选择器,`demo_test.txt`是URL,`load()`会将文件中的所有内容替换到ID为`div1`的`&lt;div&gt;`元素内。 进一步地,如果我们只想加载文件中特定部分的内容,比如`id`为`p1`的`&lt;p&gt;`元素,可以这样做: ```...

    bootstrap-demo:在demo express中使用bootstrap替换jquery mobile

    在本项目"bootstrap-demo:在demo express中使用bootstrap替换jquery mobile"中,我们将重点讨论如何将一个基于jQuery Mobile的项目转换为使用Bootstrap,特别是在Express.js这个Node.js web应用程序框架上操作。...

    jquery in action

    例如,`$("#myDiv").html("新的内容")`就能将id为"myDiv"的div内的HTML替换为"新的内容"。 事件处理是jQuery的另一大亮点。使用`.on()`方法,我们可以绑定各种事件,如点击(click)、改变(change)等。例如,`$(...

    jquery实现二维码

    在这个例子中,`text`参数是我们要编码成二维码的内容,可以根据实际需求替换为任何字符串。`width`和`height`参数定义了二维码的尺寸,可根据设计需求调整。 此外,`jquery.qrcode.js`插件还支持自定义样式。你...

    jQuery获得内容和属性示例代码

    这会将所有 `&lt;div&gt;` 元素的内容替换为包含 `&lt;h2&gt;` 和 `&lt;p&gt;` 标签的新结构。 3. `val()` 方法: `val()` 方法主要用于处理表单元素,如输入框(`&lt;input&gt;`)、选择框(`&lt;select&gt;`)等。它可以获取或设置这些元素的值...

Global site tag (gtag.js) - Google Analytics