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

只需隐藏/显示您想要显示/隐藏的表格。

有很多方法可以做到这一点，一个好的方法就是添加/删除类，例如：display: block;或display: none;

Answer 2

Javascript是你的朋友。保持简单，例如：

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

例如，您的表中有一些ID或类（请参阅“数据1”文本的单元格）：

<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：要在按钮上附加功能，您可以执行以下操作：

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

并且您必须声明您的所有真正有趣的功能：

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

Answer 3

You can easily implement this with some 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 4

这就是你想要的吗

＆＃13;

$(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>');
    }
    
  });
  
});

＆＃13;

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

＆＃13;

如何用动态

4 个答案: