javascript - Javascript: 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>

これはうまくいきます。私はそれを非表示にしたくはありませんが、innerHTML をレンダリングしたくありません (したがって、非表示のときにスペースを取りません)。この質問に似ていますが、JQuery（要件）を利用できません。これは、HTML コンテンツ全体を Javascript に入れる必要なく、単純な JavaScript を使用したかなり単純な方法ですか?

Answer 1

使用display:

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

Answer 2

の代わりにdisplay:tableandを使用display:nonevisibility: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';
}