当我使用js单击按钮时如何隐藏表格？

Question

首先查看页面只显示离开和出勤两个按钮。 当我点击离开按钮时，我会显示表格（tb2）。然后我再次点击那个按钮，它会隐藏表格

当我点击考勤时，我会显示另一个表格（tb3）。它和以前的一样

现在对我来说，当我点击离开按钮时，打开的出勤表应该关闭，出勤按钮也是如此。

我的代码：

var click = document.getElementById('clickme');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb2');
   tablewrap.classList.toggle('show')

};


var click = document.getElementById('click');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb3');
   tablewrap.classList.toggle('show')
};

Answer 1

var click = document.getElementById('clickme');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb2');
   tablewrap.classList.toggle('show');

   document.getElementById('tb3').classList.remove('show');


};


var click = document.getElementById('click');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb3');
   tablewrap.classList.toggle('show');

document.getElementById('tb2').classList.remove('show')

};

显式删除类

Answer 2

使用 JQuery 会让事情变得简单。

 $('#btnLeave').click(function(){ if($('#tblLeave').css('display')=='none'){ $('#tblLeave').css('display','block'); } else { $('#tblLeave').css('display','none'); } }); $('#btnAttendance').click(function(){ if($('#tblAttendance').css('display')=='none'){ $('#tblAttendance').css('display','block'); } else { $('#tblAttendance').css('display','none'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btnLeave">Leave</button> <button id="btnAttendance">Attendance</button> <br><br> <table id="tblLeave" style="border: 1px solid; width: 100%; display: none"> <thead> <td>Leave<td> </thead> <table> <br> <table id="tblAttendance" style="border: 1px solid; width: 100%; display: none"> <thead> <td>Attendance<td> </thead> <table>

或交替显示和隐藏两个表

 $('#btnLeave').click(function(){ if($('#divLeave').css('display')=='none'){ $('#divLeave').css('display','block'); $('#divAttendance').css('display','none'); } }); $('#btnAttendance').click(function(){ if($('#divAttendance').css('display')=='none'){ $('#divAttendance').css('display','block'); $('#divLeave').css('display','none'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btnLeave">Leave</button> <button id="btnAttendance">Attendance</button> <br><br> <div id="divLeave"> <table id="tblLeave" style="border: 1px solid; width: 100%;"> <thead> <td>Leave<td> </thead> </table> </div> <br> <div id="divAttendance" style="display: none; position: absolute; top: 47px; width: 100%"> <table id="tblAttendance" style="border: 1px solid; width: 100%"> <thead> <td>Attendance<td> </thead> </table> </div>