如何在按下回车或点击搜索按钮时显示/隐藏HTML表格

现有代码错误点 #

• 选择器规则错误：jQuery选中ID属性的元素需要加#前缀，你现有代码里$("search-input")、$("table1")、$("table2")都漏掉了前缀，无法选中对应元素
• 事件逻辑冲突：你给输入框绑定了4个重复的点击事件，先执行隐藏再执行显示，最终等于没有效果，也不符合你“回车/点击搜索按钮才显示”的需求
• 缺少默认隐藏逻辑：页面加载完成后没有先把两个表格设置为隐藏状态
• 触发事件不对：你绑定的是输入框点击事件，不是你需要的“回车触发”和“搜索按钮点击触发”
• 小问题：HTML里报告表格开头的注释少了左尖括号，建议修正为<!--Report Table Start -->避免渲染异常

修正方案 #

第一步：给搜索按钮添加ID方便选中 #

找到你搜索按钮的HTML代码，新增id属性：

<button class="btn btn-primary btn-lg" type="button" id="search-btn"><i class="fa fa-search"></i></button>

第二步：替换原有JS代码 #

$(document).ready(function() {
  // 页面加载完成后默认隐藏两个表格
  $("#table1, #table2").hide();

  // 显示表格的公共逻辑
  function showTables() {
    // 若不需要判断搜索框是否有内容，可删掉if判断直接执行show
    if($("#search-input").val().trim() !== '') {
      $("#table1, #table2").show(2000);
    }
  }

  // 监听搜索框回车事件
  $("#search-input").on('keyup', function(e) {
    // 回车键keyCode为13
    if(e.keyCode === 13) {
      showTables();
    }
  });

  // 监听搜索按钮点击事件
  $("#search-btn").on('click', showTables);
});

内容的提问来源于stack exchange，提问作者Scott