如何使用javascript使表数据占据整个表行？

Question

单击该按钮时，表格内容会更改其布局。我想保留表格布局，就像执行JavaScript函数之前一样。我是Javascript的新手

function toggle(button)
{
  if(document.getElementById("1").value=="Show upcoming"){
    document.getElementById("1").value="Show previous";
 
    //hide previous
    document.getElementById("before").style.display="none";
    
    //show upcoming
    document.getElementById("forward").style.display="block";
    
    //attempt at filling whole row
    document.getElementById("forward").style.width="100%";
  }
  else if(document.getElementById("1").value=="Show previous"){
    document.getElementById("1").value="Show upcoming";
    
    //show previous
    document.getElementById("before").style.display="block";
    
    //attempt at filling whole row
    document.getElementById("before").style.width="100%";
    
    //hide upcoming
    document.getElementById("forward").style.display="none";
  }       
}

.table1, .table2{
  width:100%;
}
.table2{
  display:none;
}

<input type="button" id="1" value="Show previous"  onclick="toggle(this);"/>
<table class="table1" cellpadding="10" cellspacing="1" border="1" id="forward" width="100%">
  <tr>
    <td class="date">
      <div class="datee" align="center">Tommorrow</div>			
    </td>
  </tr>
</table>
<table class="table2" cellpadding="10" cellspacing="1" border="1" id="before" width="100%">
  <tr>
    <td class="duvha" >
      <div class="datee" align="center">yesterday</div>								
    </td>
   </tr>
</table>

Answer 1

使用display:table代替display:block。

function toggle(button) {
    if (document.getElementById("1").value == "Show upcoming") {
        document.getElementById("1").value = "Show previous";

        //hide previous
        document.getElementById("before").style.display = "none";
        //show upcoming
        document.getElementById("forward").style.display = "table";
    } else if (document.getElementById("1").value == "Show previous") {
        document.getElementById("1").value = "Show upcoming";
        //show previous
        document.getElementById("before").style.display = "table";

        //hide upcoming
        document.getElementById("forward").style.display = "none";
    }

}

.table1, .table2 {
    width: 100 % ;
}

.table2 {
    display: none;
}

<input type="button" id="1" value="Show previous" onclick="toggle(this);" />
<table class="table1" cellpadding="10" cellspacing="1" border="1" id="forward" width="100%">
    <tr>
        <td class="date">
            <div class="datee" align="center">Tommorrow</div>
        </td>
    </tr>
</table>
<table class="table2" cellpadding="10" cellspacing="1" border="1" id="before" width="100%">
    <tr>
        <td class="duvha">
            <div class="datee" align="center">yesterday</div>

        </td>
    </tr>
</table>

Answer 2

将您的javascript更改为以下代码。 表始终显示：table;

 function toggle(button)
   {
     if(document.getElementById("1").value=="Show upcoming"){
     document.getElementById("1").value="Show previous";

     //hide previous
     document.getElementById("before").style.display="none";
     //show upcoming
     document.getElementById("forward").style.display="block";
     //attempt at filling whole row
     document.getElementById("forward").style.width="100%";
    }

   else if(document.getElementById("1").value=="Show previous"){
document.getElementById("1").value="Show upcoming";
  //show previous
 document.getElementById("before").style.display="block";
  //attempt at filling whole row
   document.getElementById("before").style.width="100%";
  //hide upcoming
  document.getElementById("forward").style.display="none";
    }

}