Question

我想切换一个＆＃34;隐藏表＆＃34;按钮＆＃34;搜索＆＃34;按钮，使其仅在搜索到的表格出现时消失。 onClick启动的功能都有效，它只是切换。任何帮助都会很棒！感谢。

<input name="Search_Country" id="Search_Country" type="text">
<input type="button" value="Search" onclick="searched_country_table()"/>
<input id="Hide" value="Hide Table" type="button" onclick="hide_table()">
<div id="search_table"></div>

Answer 1

我建议使用框架，例如jquery

＆＃13;

$( function(){
  
  $("#search_table").hide();
  $("#idhide").hide();
  
  $("#idshow").click( function(event){
    $("#search_table").show("slow");
    $("#idshow").hide();
    $("#idhide").show();
  });
  
  $("#idhide").click( function(event){
    $("#search_table").hide("slow");
    $("#idhide").hide();
    $("#idshow").show();
  });
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="Search_Country" id="Search_Country"  type="text">
    <input id="idshow"type="button" value="Search"/>
     <input id="idhide" value="Hide Table" type="button" />
      <div id="search_table">The Table</div>

＆＃13;

Answer 2

不要仅仅隐藏和显示元素来使用jQuery。

＆＃13;

window.onload = function () {               //Check the page is loaded

  function id(a){return document.getElementById(a)}

  id('search_table').style.display = 'none'; //Hide Table
  id('Hide').style.display = 'none';         //Hide Hide button
  
  id('Search').onclick = function () {       //When the search button is clicked
    id('search_table').style.display = 'block';//Show table
    this.style.display = 'none';               //Hide Search
    id('Hide').style.display = 'inline';       //Show hide button
  };
  
  id('Hide').onclick = function () {          //Hide button clicked
    id('search_table').style.display = 'none';//Hide table
    this.style.display = 'none';              //Hide Hide button
    id('Search').style.display = 'inline';    //Show search button
  };
  
};

＆＃13;

<input name="Search_Country" id="Search_Country" type="text">
<input id="Search" type="button" value="Search" onclick="searched_country_table()" />
<input id="Hide" value="Hide Table" type="button" onclick="hide_table()">
<div id="search_table">Table</div>

＆＃13;

Answer 3

这样可以很好地满足您的需求 - 最初隐藏隐藏按钮，在点击搜索时显示，并在点击隐藏按钮时隐藏结果和隐藏按钮。

$(document).ready(function() {
  
  $("#searchTable").hide();
  $("#buttonHide").hide();
  
  $("#buttonShow").on("click", function(event){
    $("#searchTable").show();
    $("#tableContent").append($("#searchCountry").val() + "<br />");
    $("#buttonHide").show();
  });
  
  $("#buttonHide").click( function(event){
    $("#searchTable").toggle();
    $("#buttonHide").toggle();
  });
  
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Toggle Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  
  <input name="Search_Country" id="searchCountry" type="text">
  <input id="buttonShow" type="button" value="Search"/>
  <input id="buttonHide" value="Hide Table" type="button" />
  <div id="searchTable">The Table
    <div id="tableContent">
      
    </div>
  </div>

</body>
</html>

切换＆＃34;隐藏表＆＃34;按钮＆＃34;搜索＆＃34;按键

3 个答案: