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

最新推荐文章于 2021-06-16 03:15:00 发布

原创最新推荐文章于 2021-06-16 03:15:00 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #交通 #Go #ViewUI

JQuery 专栏收录该内容

10 篇文章

订阅专栏

本文通过实例演示如何使用jQuery进行表单元素的动态添加、删除及替换操作，特别是在添加和管理分支机构信息时的应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中会经常应用到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的灵活控制的魅力，欢迎大家下载研究，有不妥之处还请不吝赐教，谢谢 ...