用 "search" 按钮切换 "hide table" 按钮

Question

我想用 "search" 按钮切换 "hide table" 按钮，以便它仅在搜索到的 table 出现和消失时出现。 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

$( 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();
  });
  
});

<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>

Answer 2

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

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
  };
  
};

<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>

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>

用 "search" 按钮切换 "hide table" 按钮

Toggle a "hide table" button with "search" button

javascript

toggle