如何在JS中隱藏多個動態列

Question

在這里，我設置了一個按鈕，即切換按鈕。 如果單擊該按鈕，則我的部分字段將被隱藏。 如果我再次點擊，則應顯示“隱藏”字段。 這是我的情況。

這是我的HTML代碼：

 <!-- 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") ?> 

動態字段是：

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

我的Javascript代碼：

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

我的問題：但是我的問題只是隱藏標題和第一行字段。 剩余的行不會隱藏。 我不知道為什么第二行和以后行的列不隱藏。

請任何人幫助我解決我的問題。

Answer 1

像這樣更改代碼

您的PHP代碼

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

// Code for td 

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

現在像這樣更改JS函數

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

Answer 2

按照建議，將id更改為class，然后使用類似以下的內容來切換顯示：

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

請注意，這也可以通過添加或刪除具有display：none （通常是更好的選擇）的類來實現。