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 ，然后使用以下内容切换显示：

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，这也可以通过添加或删除具有 display：none 的类来实现（这是一个更好的选择）。

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

2 个答案: