Html 如何在java脚本中切换（隐藏/显示）<a>标签的表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15698542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to toggle (hide/show) a table onClick of <a> tag in java script
提问by Qadir Hussain
I want to show and hide (toggle) the <table>onClickevent of the <a>.
this is my <a>tag
我要显示和隐藏（切换）的<table>onClick的事件<a>。这是我的<a>标签
<a id="loginLink" onclick="toggleTable(true);" href="#">Login</a>
here is my java script function toggleTable(hide)
这是我的java脚本函数 toggleTable(hide)
<script>
function toggleTable(hide)
{
if (hide) {
document.getElementById("loginTable").style.display="table";
document.getElementById("loginLink").onclick = toggleTable(false);
} else {
document.getElementById("loginTable").style.display="none";
document.getElementById("loginLink").onclick = toggleTable(true);
}
}
</script>
and here is my <table>tag
这是我的<table>标签
<table id="loginTable" border="1" align="center" style="display:none">
1st time when I click the <a> linkit shows my table, but not hiding back when i click it next time. what i m doing wrong.
第一次单击<a> link它时会显示我的表格，但下次单击时不会隐藏。我做错了什么。
回答by hjpotter92
You are trying to alter the behaviour of onclickinside the same function call. Try it like this:
您正试图改变onclick同一函数调用内部的行为。像这样尝试：
Anchor tag
锚标签
<a id="loginLink" onclick="toggleTable();" href="#">Login</a>
JavaScript
JavaScript
function toggleTable() {
var lTable = document.getElementById("loginTable");
lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}
回答by Praveen kalal
Simple using jquery
简单使用jquery
<script>
$(document).ready(function() {
$('#loginLink').click(function() {
$('#loginTable').toggle('slow');
});
})
</script>
回答by Habib
You need to modify your function as:
您需要将您的功能修改为：
function toggleTable()
{
if (document.getElementById("loginTable").style.display == "table" ) {
document.getElementById("loginTable").style.display="none";
} else {
document.getElementById("loginTable").style.display="table";
}
currently it is checking based on the booleanparameter, you don't have to pass the parameter with your function.
目前它正在根据boolean参数进行检查，您不必将参数与您的函数一起传递。
You need to modify your anchor tag as:
您需要将锚标记修改为：
<a id="loginLink" onclick="toggleTable();" href="#">Login</a>
回答by Manish Mishra
inside your function toggleTablewhen you do this line
toggleTable当您执行此行时，在您的函数中
document.getElementById("loginLink").onclick = toggleTable(....
you are actually calling the function again. so toggleTablegets called again, and again and again, you're falling in an infinite recursive call.
您实际上是再次调用该函数。所以toggleTable一次又一次地被调用，你陷入了无限的递归调用。
make it simple.
让它变得简单。
function toggleTable()
{
var elem=document.getElementById("loginTable");
var hide = elem.style.display =="none";
if (hide) {
elem.style.display="table";
}
else {
elem.style.display="none";
}
}
see this fiddle
看到这个小提琴
回答by Rohit Vyas
Your anchor tag should be:
你的锚标签应该是：
<a id="loginLink" onclick="showHideTable();" href="#">Login</a>
And You javascript function :
而你的 javascript 函数：
function showHideTable()
{
if (document.getElementById("loginTable").style.display == "none" ) {
document.getElementById("loginTable").style.display="";
} else {
document.getElementById("loginTable").style.display="none";
}
回答by gifpif
visibilityproperty makes the element visible or invisible.
visibility属性使元素可见或不可见。
function showTable(){
document.getElementById('table').style.visibility = "visible";
}
function hideTable(){
document.getElementById('table').style.visibility = "hidden";
}
回答by TGH
You are always passing in true to the toggleMethod, so it will always "show" the table. I would create a global variable that you can flip inside the toggle method instead.
您始终将 true 传递给 toggleMethod，因此它将始终“显示”表格。我会创建一个全局变量，您可以在切换方法中翻转它。
Alternatively you can check the visibility state of the table instead of an explicit variable
或者，您可以检查表的可见性状态而不是显式变量
回答by Arvind
Try
尝试
<script>
function toggleTable()
{
var status = document.getElementById("loginTable").style.display;
if (status == 'block') {
document.getElementById("loginTable").style.display="none";
} else {
document.getElementById("loginTable").style.display="block";
}
}
</script>
