繁体   English   中英

取消按钮HTML jQuery

[英]Cancel button HTML jQuery

嗨,由于这个取消按钮的问题,我被当前的工作困住了。

在这里,我将通过一些屏幕短裤来说明我的问题 在此处输入图片说明

当我点击第一个单选按钮[Unique]时,这是我的第一页

在此处输入图片说明

在这里,我想单击“取消”按钮时,它会回到第一屏,但是当我单击时,它确实像dis

在此处输入图片说明 这是完整的代码

   <head>
  <meta charset="utf-8" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-
 ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 <style>
     .raddiv{
        height: 30px;        
     }
    .sitehtn{
     display: none
            }        

    .container       
     {
    width: 100%;
    height: 600px;
    background-color: rgb(179, 174, 174);        
     }

    #datepickerT
    {
    margin-left: 2em;
    }

    .eventDateDiv
    {
    height: 150px;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    }
    #daysBetween
    {
    margin-top: -1.4em;
    margin-left: 30%;
    }
    .eventShowDiv
    {
    height: 306px;
     width: 65%;
    margin-left: auto;
    margin-right: auto;

    }
    .event{
    color: green;
    margin-top: 5px;}
  </style>
   <script>
          $(function() {
        $( "#datepickerF" ).datepicker({
            showOn: "button",
           buttonImage: "calendar.gif",
          buttonImageOnly: true
        });

   $( "#datepickerT" ).datepicker({
              showOn: "button",
            buttonImageOnly: true
         });
$('#getdays').click(function() {
     var start = $('#datepickerF').datepicker('getDate');
       var end   = $('#datepickerT').datepicker('getDate');
      var days   = (end - start)/1000/60/60/24;
      document.getElementById("daysBetween").innerText=days;

           });

    $(".radioBtn").click(function() {
    $(".textBox").hide();
    if ($(this).attr("id") == "courtierRadio") {
    $("#faderad").fadeOut();
   var is= $("#txt1, #txt2,#txt3,#getmrr,#rmvmrr")
   is.show();

    } else if ($(this).attr("id") == "agenceRadio") {
         $("#fadfirst").fadeOut();
     var vs=$("#txt5,#txt6,#txt7,#txt8").show();
     vs.show();
    }   

    });
       $("#getmrr").click(function() {
      $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
      return false;

    });
    $("#rmvmrr").click(function() {

      $("#mytable").remove();

      return false;

    });
      function myFunction()
       {
       $("#getmrr").append(is);
        }
      });

      </script>
              </head>
       <body>
     <div class="container">

        <div class="eventDateDiv">
            <div class="event">
                EVENT DATE
            </div>

            <p>FROM: <input type="text" id="datepickerF" /></p>
            <p>To: <input type="text" id="datepickerT" /></p>


            <button id="getdays">NO.OF DAYS </button>
            <p id="daysBetween"> </p>

        </div> 
        <div class="eventShowDiv">
            <div class="event">
                EVENT SHOW TIME
            </div>
            <p>TYPE OF SHOW: </p>
     <div id="fadfirst" class="raddiv">         
               <label>
      <input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" 
    class="radioBtn" />Unique
   </label>
      <table id="mytable" width="500" >
   <tbody>
   <tr>
<td>
     <input type="text" name="site" class="sitehtn" id="txt1" />
     <input type="text" name="site" class="sitehtn" id="txt2" />
      <input type="text" name="site" class="sitehtn" id="txt3" />
  </td>
     </tr>
  </tbody>
      </table>
       <button id="getmrr" class="sitehtn" >addmore</button>
       <button id="rmvmrr" class="sitehtn" >Cancel</button>

     <br />
     </div>
   <div id="faderad">
        <label>
      <input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" 
    class="radioBtn" />
     Varied
    </label>

   <input type="text" name="textfield3" class="sitehtn" />

        <input type="text" name="textfield" class="sitehtn" id="txt5" />   
          <input type="text" name="textfield" class="sitehtn" id="txt6" />  
         <input type="text" name="textfield" class="sitehtn" id="txt7" />   
            <input type="text" name="textfield" class="sitehtn" id="txt8" />             
</div>                  
        </div> 
    </div> 
       </body>
        </html>

我只是新来者,因此请提供一些宝贵意见的指导

您需要告诉浏览器显示“变量”单选按钮选项,并隐藏“ addmore”和“取消”按钮。

更改与取消按钮关联的点击事件

$("#rmvmrr").click(function() {

   $("#mytable").remove();

   return false;

});

$("#rmvmrr").click(function() {

    $("#mytable").remove();
    $("#faderad").show();
    $("#getmrr").hide();
    $("#rmvmrr").hide();

    return false;

 });

这里的工作示例

我认为

$("#rmvmrr").click(function() {

      $("#mytable").remove();

      return false;

    });

至:

$("#rmvmrr").click(function() {

      $("#mytable").hide();

      return false;

    });

会把它藏起来

如果要删除它:我想说,由于按钮不在标签内,所以将它们上移到表中,然后说:

$("#myTable").html("");

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM