javascript - 如何通过类名隐藏td?

标签 javascript jquery html class html-table

我尝试在表中隐藏一些 td,当用户单击按钮时显示它们。

一开始

<?php
   $riskCounter=0;
?>

然后

<tr class ="headMit<?php echo $riskCounter ?>">
    <th colspan="6">Title</th>
</tr>
<?php foreach ($actions as $action) 
{ ?>
     <tr class="body"  class ="bodyMit<?php echo $riskCounter ?>">
          <td colspan="6" style="border: 1px solid  #b4b4b4;" height="40px">
               <?php echo nl2br($action->description); ?>
          </td>
     </tr>
<?php 
} ?>

然后

<script>
       $('.bodyMit'+<?=$riskCounter ?>).hide();         
       $('.headMit'+<?=$riskCounter ?>).hide();
</script>

在某个地方按钮:

<input type="button" class="niceButton" onclick="showMitAct('<?php echo $riskCounter ?>')" value="Show/hide" />

在另一个包含所有代码的 foreach 的末尾(还有更多,但我认为其余代码在这个问题中并不重要)。

<?php
   $riskCounter++;
?>

显示/隐藏功能:

function showMitAct(id) {
    if($(".headMit"+id).is(':hidden'))
    {
        $(".headMit"+id).show();
        $(".bodyMit"+id).show();
    }
    else
    {
        $(".headMit"+id).hide();
        $(".bodyMit"+id).hide();
    }   
}

好的,有问题。当我单击按钮时,带有 class=headMit(...) 的 td 隐藏并正确显示,但带有 class=bodyMit(...) 的 td 始终显示。

在我使用id而不是class之前,隐藏/显示工作正常,但仅适用于其中一个bodyMit。很明显...一个元素可以有一个 id,但类可以绑定(bind)到许多元素...

请告诉我我做错了什么或者我可以在哪里查找错误。

最佳答案

我没有尝试你的建议,但谢谢你的回答。

问题是,我使用了两次属性类。当我更改名称时,一切都好。

关于javascript - 如何通过类名隐藏td?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25915395/

相关文章:

javascript - 如何在 JS Typewriter 中停止旋转?

javascript - 我正在复制列表项元素,但不知道如何更正

javascript - 将键值对添加到数组中的所有对象

javascript - 使用javascript解析GET中的HTML到文件

javascript - 使用 jQuery 选择 SVG 宽度?

html - 截断表中跨度内的文本

JavaScript:对数组中的对象进行赋值会更改数组中所有对象的值

jQuery 多个变量无法在同一页面上工作

javascript - 通过 jquery 将图像附加到 <td>

javascript - Vue.js:延迟地一次输出一个元素的数组内容