如何在JS中隐藏多个动态列

Here I have set one button, which is toggle button. If I click that button Part of my fields should be hide. If I hit again, Hidden field should be show. This is my scenario.

Here is my HTML Code:

 <!-- My toggle button code is here -->
 <td  align="center">
    <input type="button" id="viewbutton"  style="width:80px;" class="button" onclick = "hide()" value="View More"/> 
  </td>

<!-- My headers of the table which are all hide while I hit the above button-->
<tr>
  <th width='120' scope='col' id='remarks'><div align="left">Remarks</div></th>
  <th width='66' scope='col' id='lan' ><div align="left">LAN Mac Address</div></th>
  <th width='70' scope='col' id='wifi' ><div align="left">Wifi Mac Address</div></th>
  <th width='65' scope='col' id='scrapped' ><div align="center">Scrapped date</div></th>

</tr>
<?php  PopulateSystemAsset_byLocation($location_posted,$asset_type_posted,$employees_posted,"LIST") ?> 

Dynamic Fields are:

function populateSystemAsset_byLocation($locations,$asset_types,$employees,$check)
 {

  while($fetchedquery = mysql_fetch_array($selectquery))

    //Retrieve all field from Database and assigned to variable (assume)

    echo "<tr>";
         echo "<td align='left'>$asset_type</td>
         <td align='left'>$asset_description</td>";

        echo "<td align='left' id='remarks_Ans'>$Remarks</td>"; 

        if($LAN_addr == '' || $LAN_addr == 'NULL' ) 
        { 
            echo "<td align='center' id='lan_Ans'></td>";
        }
       else
       {
            echo "<td align='center' id='lan_Ans'>$LAN_addr</td>";  //Formatted Date
       }

        if($Wifi_addr == '' || $Wifi_addr == 'NULL' ) 
        { 
            echo "<td align='center' id='wifi_Ans'></td>";
        }
       else
       {
            echo "<td align='center' id='wifi_Ans'>$Wifi_addr</td>";  //Formatted Date
       }


       if($asset_scrapped_date == '' || $asset_scrapped_date == '0000-00-00') 
        { 
            echo "<td align='center' id='scrapped_Ans'></td>";
        }
       else
        {
            echo "<td align='center' id='scrapped_Ans'>$ScrappedDateFormatted</td>";  //Formatted Date
        }
      echo "</tr>";

 }//while
}//function

My Javascript code :

   //Initially I Hide my fiels while page loads 

<script type="application/javascript">
  var flag = 0;

  function hide()
   {
    if(flag == 0)
    {
    document.getElementById("viewbutton").value = "View Less";
    document.getElementById("remarks").style.display = "table-cell";
    document.getElementById("lan").style.display = "table-cell";
    document.getElementById("wifi").style.display = "table-cell";
    document.getElementById("scrapped").style.display = "table-cell";
    document.getElementById("remarks_Ans").style.display = "table-cell";
    document.getElementById("lan_Ans").style.display = "table-cell";
    document.getElementById("wifi_Ans").style.display = "table-cell";
    document.getElementById("scrapped_Ans").style.display = "table-cell";
    flag = 1;
   }
   else
   {
    document.getElementById("viewbutton").value = "View More";
    document.getElementById("remarks").style.display = "none";
    document.getElementById("lan").style.display = "none";
    document.getElementById("wifi").style.display = "none";
    document.getElementById("scrapped").style.display = "none";
    document.getElementById("remarks_Ans").style.display = "none";
    document.getElementById("lan_Ans").style.display = "none";
    document.getElementById("wifi_Ans").style.display = "none";
    document.getElementById("scrapped_Ans").style.display = "none";
    flag = 0;
    }
  }
</script>

My Problem: But my problem is only hide headers and first row fields. Remaining rows does not hide. I don't know why second and future row's columns are not hide.

Please anyone help me to solve my problem.

Change your code like this

Your PHP code

function populateSystemAsset_byLocation($locations,$asset_types,$employees,$check)
 {
  echo "<tr class='toggleClass'>";

// Code for td 

echo "</tr>";
}//function

Now change JS function like this

<script type="application/javascript">
  var flag = 0;

  function hide()
   {
    if(flag == 0)
    {
    document.getElementById("viewbutton").value = "View Less";
    document.getElementsByClassName("toggleClass").style.display = "table-cell";
    flag = 1;
   }
   else
   {
    document.getElementById("viewbutton").value = "View More";
    document.getElementsByClassName("toggleClass").style.display = "none";
    flag = 0;
    }
  }
</script>

As suggested, change the id to class then use something like the following to toggle the display:

    // Default value for flag
    var flag = true;

    function showHide() {

      // Toggle button label
      document.getElementById("viewbutton").value = flag? 'View more' : 'View less';

      // Toggle display of rows
      var nodes = document.querySelectorAll('.remarks, lan, .wifi, .scrapped, .remarks_Ans, .lan_Ans, .wifi_Ans, scrapped_Ans');

      for (var i=0, iLen=nodes.length; i<iLen; i++) {
        nodes[i].style.display = flag? 'none' : '';
      }

      // Toggle the flag true/false
      flag = !flag;
    }

<input type="button" onclick="showHide()" id="viewbutton" value="Show less">
<table>
  <tr class="remarks"><td>remarks</td></tr>
  <tr class="wifi"><td>wifi</td></tr>
</table>

Note that this can also be achieved by adding or removing a class that has display:none as a rule (which is a much better option).

</div>