I want to show and hide (toggle) the <table>
onClick
event of the <a>
. this is my <a>
tag
<a id="loginLink" onclick="toggleTable(true);" href="#">Login</a>
Here is my Javascript function 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 id="loginTable" border="1" align="center" style="display:none">
The first time when I click the <a> link
it shows my table, but not hiding back when I click it next time. What am I doing wrong?
You are trying to alter the behaviour of onclick
inside the same function call. Try it like this:
<a id="loginLink" onclick="toggleTable();" href="#">Login</a>
function toggleTable() {
var lTable = document.getElementById("loginTable");
lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}
Simple using jquery
<script>
$(document).ready(function() {
$('#loginLink').click(function() {
$('#loginTable').toggle('slow');
});
})
</script>
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 boolean
parameter, you don't have to pass the parameter with your function.
You need to modify your anchor tag as:
<a id="loginLink" onclick="toggleTable();" href="#">Login</a>
inside your function toggleTable
when you do this line
document.getElementById("loginLink").onclick = toggleTable(....
you are actually calling the function again. so toggleTable
gets called again, and again and again, you're falling in an infinite recursive call.
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
Your anchor tag should be:
<a id="loginLink" onclick="showHideTable();" href="#">Login</a>
And You javascript function :
function showHideTable()
{
if (document.getElementById("loginTable").style.display == "none" ) {
document.getElementById("loginTable").style.display="";
} else {
document.getElementById("loginTable").style.display="none";
}
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.
Alternatively you can check the visibility state of the table instead of an explicit variable
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>
visibility
property makes the element visible or invisible.
function showTable(){
document.getElementById('table').style.visibility = "visible";
}
function hideTable(){
document.getElementById('table').style.visibility = "hidden";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.