あるテーブル（HTML）を他のテーブルと動的に置き換える方法

Question

他のテーブルはいくつかのデータ変更を除いてまったく同じです。私が望むのは、ボタンクリックで他のテーブルとこのテーブルを動的に変更することです。

<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3"> 
    <TR> 
     <TH COLSPAN="2"><BR><H3>TABLE TITLE</H3> 
     </TH> 
    </TR> 
    <TR> 
     <TH>Column A</TH> 
     <TH>Column B</TH> 
    </TR> 
    <TR ALIGN="CENTER"> 
     <TD>Data 1</TD> 
     <TD>Data 2</TD> 
    </TR> 
</TABLE> 
<button href="#">next table 
</button> 

Answer 1

JavaScriptを使用すると簡単に実装できます。

visible = 1; //var that keeps track of which table is visible (1 or 2) 
 
function change_table() { 
 
    t1 = document.getElementById("TABLE1"); 
 
    t2 = document.getElementById("TABLE2"); 
 
    if(visible == 1) { 
 
    visible = 2; 
 
    t1.style.display = 'none'; 
 
    t2.style.display = 'block'; 
 
    } else { 
 
    visible = 1; 
 
    t1.style.display = 'block'; 
 
    t2.style.display = 'none'; 
 
    } 
 
}

<TABLE ID='TABLE1' BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3" STYLE="display: block;"> 
 
    <TR> 
 
     <TH COLSPAN="2"><BR><H3>TABLE TITLE</H3> 
 
     </TH> 
 
    </TR> 
 
    <TR> 
 
     <TH>Column A</TH> 
 
     <TH>Column B</TH> 
 
    </TR> 
 
    <TR ALIGN="CENTER"> 
 
     <TD>Data 1</TD> 
 
     <TD>Data 2</TD> 
 
    </TR> 
 
</TABLE> 
 
    <TABLE ID='TABLE2' BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3" STYLE="display: none;"> 
 
    <TR> 
 
     <TH COLSPAN="2"><BR><H3>TABLE TITLE</H3> 
 
     </TH> 
 
    </TR> 
 
    <TR> 
 
     <TH>Column C</TH> 
 
     <TH>Column D</TH> 
 
    </TR> 
 
    <TR ALIGN="CENTER"> 
 
     <TD>Data 3</TD> 
 
     <TD>Data 4</TD> 
 
    </TR> 
 
</TABLE> 
 
<button onclick="change_table()">next table 
 
</button>

Answer 2

表示/非表示にする表を非表示にするだけです。

これを行うには多くの方法がありますが、良いpraticeはちょうど例えば追加クラスを追加/削除することです：display: block;またはdisplay: none;

Answer 3

Javascriptがあなたの友達です。例えば、それをシンプルに保つ：

たとえば、あなたのテーブル内のいくつかのIDのまたはクラス（「データ1」のテキストでのセルを参照してください）持って

document.getElementById('tableCell').innerHTML = 'New Content'; 

：追加する ：

EDITED

<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3"> 
    <TR> 
     <TH COLSPAN="2"><BR><H3>TABLE TITLE</H3> 
     </TH> 
    </TR> 
    <TR> 
     <TH>Column A</TH> 
     <TH>Column B</TH> 
    </TR> 
    <TR ALIGN="CENTER"> 
     <TD id="tableCell">Data 1</TD> 
     <TD>Data 2</TD> 
    </TR> 
</TABLE> 
<button href="#">next table 
</button> 

を

<button onclick="myFunction()">Click me</button> 

、あなたはすべての本当の楽しみがされる場所、あなたの関数を宣言する必要があります：あなたのボタンへの機能は、あなたがこれを行うことができます

function myFunction(){ 
/* change table cell values here */ 
} 

Answer 4

あなたは

$(function(){ 
 
    $("button").on('click', function(){ 
 
    $("#table1").empty(); 
 
    $('#table1').append('<TR><TH COLSPAN="2"><BR><H3>TABLE TITLE</H3></TH></TR>'); 
 
    $('#table1').append('<TR><TH>Column A</TH><TH>Column B</TH></TR>'); 
 
    var max = Math.floor((Math.random() * 10) + 1); 
 
    for(var i=0;i < max;i++){ 
 
     $('#table1').append('<TR ALIGN="CENTER"><TD>Data ' + i + '</TD><TD>Data ' + i + '</TD></TR>'); 
 
    } 
 
    
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<TABLE id="table1" BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3"> 
 
    <TR> 
 
     <TH COLSPAN="2"><BR><H3>TABLE TITLE</H3> 
 
     </TH> 
 
    </TR> 
 
    <TR> 
 
     <TH>Column A</TH> 
 
     <TH>Column B</TH> 
 
    </TR> 
 
    <TR ALIGN="CENTER"> 
 
     <TD>Data 1</TD> 
 
     <TD>Data 2</TD> 
 
    </TR> 
 
</TABLE> 
 
<button href="#">next table 
 
</button>