码迷,mamicode.com
首页 > 其他好文 > 详细

表单处理之添加删除表单行

时间:2016-09-10 22:25:54      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:function   标签   parent   

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="search_conditions">

        <div class="condition">

         <a onclick="AddCondition(this,‘#search_conditions‘)">+</a>

         <input />

        </div>

    </div>


    <script src="js/jquery-1.8.2.min.js"></script>

    <script>

        function AddCondition(ths,container){

            //ths 这里指<a></a>标签

          var cp = $(ths).parent().clone();

            //克隆标签<a></a>父标签并赋给变量cp

            cp.children(‘:first‘).text(‘-‘).attr(‘onclick‘,"RemoveCondition(this,‘#search_conditions‘)");

            //获取父标签第一个孩子a标签中的内容然后通过text将内容修改为‘-‘,

            //接着通过attr修改onclick绑定的函数AddCondition为RemoveCondition


            $(‘#search_conditions‘).append(cp);

            //将克隆后的结果cp追加到父标签中

            //cp.appendTo(‘#search_conditions‘)

        }


        function RemoveCondition(ths,container){

            //ths形参代表标签<a></a>,所以标签a的父标签为<div class="condition"></div>,

            //然后删除整个父标签从而实现删除整个表单的功能

            $(ths).parent().remove();


        }

    </script>

</body>

</html>

演示效果:

技术分享

本文出自 “平平淡淡才是真” 博客,请务必保留此出处http://ucode.blog.51cto.com/10837891/1851434

表单处理之添加删除表单行

标签:function   标签   parent   

原文地址:http://ucode.blog.51cto.com/10837891/1851434

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!