So ersetzen Sie eine Tabelle (HTML) durch andere dynamisch

Question

Die andere Tabelle ist genau das gleiche mit Ausnahme einiger Datenänderungen.Alles was ich will ist, diese Tabellen mit anderen Tabellen dynamisch bei einem Klick auf die Schaltfläche zu ändern.

<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

Sie können dies leicht mit etwas JavaScript implementieren.

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

Verstecken Sie einfach/zeigen Sie die Tabelle an, die Sie sichtbar/verborgen wünschen.

Es gibt viele Möglichkeiten, dies zu tun, ist ein guter pratice nur hinzufügen/entfernen Klasse, die zum Beispiel fügt hinzu: display: block; oder display: none;

Answer 3

Javascript ist dein Freund. es einfach, zum Beispiel zu halten:

<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> 

EDITED:

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

wo zum Beispiel einige IDs oder Klassen in der Tabelle (mit "Data 1" Text siehe Zelle) haben anhängen ein Funktion, um Ihre Schaltfläche können Sie dies tun:

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

und Sie werden Ihre Funktion zu erklären, wo alle richtig Spaß haben sein wird:

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

Answer 4

Ist das, was Sie

$(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>