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

这里我设置了一个按钮，这是切换按钮。如果我点击该按钮，我的部分字段将被隐藏。如果我再次击中，隐藏的领域应该显示。这是我的设想

以下是我的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") ?> 

评论
局域网Mac地址
无线Mac地址
报废日期

动态字段包括：

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

函数通过位置（$location、$asset\u types、$employees、$check）填充系统资产
{
而（$fetchedquery=mysql\u fetch\u数组（$selectquery））
//从数据库检索所有字段并分配给变量（假设）
回声“；
回显“$asset\u类型
$asset_description”；
附和“$备注”；
如果（$LAN_addr==''| |$LAN_addr=='NULL'）
{ 
回声“；
}
其他的
{
echo“$LAN_addr”//格式化日期
}
如果（$Wifi_addr=''Wifi||$Wifi_addr=='NULL'）
{ 
回声“；
}
其他的
{
echo“$Wifi\u addr”//格式化日期
}
如果（$asset_Discarted_date=''资产| |$asset_Discarted_date=='0000-00-00'）
{ 
回声“；
}
其他的
{
回显“$scrasedDateFormatted”//格式化日期
}
回声“；
}//当
}//作用

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

//最初我在加载页面时隐藏我的域
var标志=0；
函数hide（）
{
如果（标志==0）
{
document.getElementById（“viewbutton”）.value=“无视图”；
document.getElementById（“备注”）.style.display=“表格单元格”；
document.getElementById（“lan”）.style.display=“表格单元格”；
document.getElementById（“wifi”）.style.display=“表格单元格”；
document.getElementById（“报废”）.style.display=“表格单元格”；
document.getElementById（“备注”）.style.display=“表格单元格”；
document.getElementById（“lan_Ans”）.style.display=“表格单元格”；
document.getElementById（“wifi_Ans”）.style.display=“表格单元格”；
document.getElementById（“报废的”）style.display=“表格单元格”；
flag=1；
}
其他的
{
document.getElementById（“viewbutton”）.value=“查看更多”；
document.getElementById（“备注”）.style.display=“无”；
document.getElementById（“lan”）.style.display=“无”；
document.getElementById（“wifi”）.style.display=“无”；
document.getElementById（“报废”）.style.display=“无”；
document.getElementById（“备注”）.style.display=“无”；
document.getElementById（“lan_Ans”）.style.display=“无”；
document.getElementById（“wifi_Ans”）.style.display=“无”；
document.getElementById（“报废的”）style.display=“无”；
flag=0；
}
}

我的问题是： 但我的问题是只隐藏标题和第一行字段。其余行不隐藏。我不知道为什么第二行和未来行的列不隐藏

---

请任何人帮我解决问题。

像这样更改代码

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

您的PHP代码

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

// Code for td 

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

根据建议，将id更改为class，然后使用类似于以下的方法切换显示：

//标志的默认值
var标志=真；
函数showHide（）{
//切换按钮标签
document.getElementById（“viewbutton”）.value=标志“查看更多”：“查看更少”；
//切换行的显示
var nodes=document.queryselectoral（'.marks，lan，.wifi，.scrapsed，.marks_Ans，.lan_Ans，.wifi_Ans，scrapsed_Ans'）；
对于（var i=0，iLen=nodes.length；我将类添加到每个tr，然后使用它隐藏。您不能多次使用同一id。谢谢sunil。我已将id更改为类。还将js代码更改为document.getElementsByClassName（“lan_Ans”）。style.display=“无”；。现在没有任何字段隐藏。如果您提供生成的标记，而不是生成标记的服务器代码，这将使其他人的生活变得更简单。此外，与在“表单元格”和“无”之间切换相比，在“”（空字符串）和“无”之间切换要简单得多，这样元素将转换为其默认或继承的样式（可能是任何东西）。这也允许隐藏/显示函数是泛型的，可以应用于任何元素，而不管其默认样式如何。显示值。getElementsByClassName返回一个节点列表。您必须迭代它来隐藏每个节点。或者您可以改为更改样式规则，这对于许多元素来说速度要快得多。哦，谢谢RobG。我不明白。您能简单解释一下切换（无、空字符串和表格单元格）吗.ya谢谢sunil。但我不需要隐藏整行。我只需要从echo行中隐藏部分列。前两列应显示内容。仅隐藏/显示，其余列取决于用户单击按钮。@SanKaRan然后请提供HTML表also@suil.我没有用html编写任何特定的代码。该函数本身可以打印所有元素。查看上面的PHP代码。