Javascript：切換loading InnerHTML

Question

<script> 
    function toggle_table() { 
     visibility = document.getElementById("table").style.visibility; 
     document.getElementById("table").style.visibility = (visibility == 'visible') ? 'hidden' : 'visible'; 
     document.getElementById("toggle_table").innerHTML = (visibility == 'visible') ? 'Open' : 'Close'; 
    } 
</script> 

<form method='POST'> 
    <a id='toggle_table' href='#' onClick='toggle_table()'>Open</a> WIJZIGEN PROCES 
    <table id='table' style='visibility: hidden'> 
    </table> 
</form> 

This works great。雖然我不想讓它看起來不可見，但我不想渲染innerHTML（因此當它不可見時它不會佔用空間）。類似於這個question，儘管我不能使用JQuery（需求）。這是用簡單的JavaScript的一種相當簡單的方式，而不需要把整個HTML內容放入Javascript中？

Answer 1

使用display：

document.getElementById("table").style.display = (display == 'none') ? '' : 'none'; 

Answer 2

使用display:table和display:none，而不是visibility:hidden/visible

Answer 3

您可以嘗試使用這個屬性display

function toggle_table() { 
    display = document.getElementById("table").style.display; 
    document.getElementById("table").style.display= (display != 'none') ? 'none' : 'table'; 
    document.getElementById("toggle_table").innerHTML = (display== 'table') ? 'Open' : 'Close'; 
}