使用下拉菜单显示表格中的隐藏行答案

【问题标题】：Show hidden rows in table with dropdown使用下拉菜单显示表格中的隐藏行
【发布时间】：2012-12-17 06:47:12
【问题描述】：

我有一些看起来相当简单的东西，但我很难过。我想要一个影响显示多少表行的表中的下拉列表。默认情况下，仅显示 2 行。通过在下拉列表中选择 4，应显示 4 行。我只看到其中一个隐藏的行出现，并且我也尝试将 2 行包装在一个隐藏的 div 中，但没有运气。想法？

  <table border="1">
          <tr>
            <td class="noBG" colspan="3">
              <select id="displayText" onchange="javascript:toggle();">
                <option>2</option>
                <option>4</option>
              </select>Items
            </td>
          </tr>
          <thead>
            <tr>
              <th>Dates</th>
              <th>Time</th>
              <th>Person</th>
            </tr>
          </thead>
            <tr>
              <td>12/3</td>
              <td>12:45</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>12/4</td>
              <td>12:45</td>
              <td>James Doe</td>
            </tr>
            <tr id="toggleText" style="display: none">
              <td>12/4</td>
              <td>12:45</td>
              <td>Janey Doe</td>
            </tr>
            <tr id="toggleText" style="display: none">
              <td>12/4</td>
              <td>12:45</td>
              <td>Janey Doe</td>
            </tr>
        </table>

        <script language="javascript"> 
        function toggle() {
            var ele = document.getElementById("toggleText");
            if(ele.style.display == "block") {
                    ele.style.display = "none"; 
            }
            else {
                ele.style.display = "block";
            }
        } 
        </script>

【问题讨论】：

getElementById 只会获取一个元素
你的问题和这个问题很相似：stackoverflow.com/questions/1933602/…
不要使用属性id 来标识一组元素。 ID 应该是唯一的，不能重复。
问题根本不是id，而是display属性的使用（见下文我的回答）

标签： javascript select drop-down-menu html-table hidden

【解决方案1】：

将所有<tr id="toggleText"改为<tr name="toggleText"，然后将toggle函数改为如下：

function toggle() {
    var ele = document.getElementsByName("toggleText");
    for (var i = 0; i < ele.length; i++) {
        if (ele[i].style.display == "block") { 
            ele[i].style.display = "none";
        }
        else {
            ele[i].style.display = "block";
        }
    }
}

【讨论】：

【解决方案2】：

使用display: block; 不起作用，因为表格行会以不正确的方式显示。但是您可以通过添加和删除一个类来切换可见性，该类由display: none; 定义。所以一定不能切换display: none/block;，而是切换类。

这有效（包括 jQuery）：http://jsfiddle.net/Yuvvc/1/

JS函数可以使用以下代码：

function toggle() {
    $.each($('tr[name=toggleText]'), function() {
        $(this).toggleClass("hiddenRow", $(this).attr('class') != "hiddenRow");
    });
}

使用.toggleClass 的第二个参数 (bool)，您可以添加和删除类。

编辑

这里是非 jQuery 版本：

function toggle() {
    var rows = document.getElementsByName("toggleText");
    for(var i=0; i<rows.length; i++)
    {
        rows[i].className = (rows[i].className == "hiddenRow") ? "" : "hiddenRow";
    }
}

【讨论】：

抱歉回复晚了。完美运行，非常感谢。

【解决方案3】：

您可以通过为每一行提供如下 id 来切换隐藏的行：

<table class="table">
@foreach (var item in Model)
{
    <tr>
        <td onclick="toggle1(@item.ID)" colspan="3">

            @Html.DisplayFor(modelItem => item.Name)

        </td>
    </tr>

    <tr class="hidden" id="bluh_@item.ID">


        <td>

            @Html.DisplayFor(modelItem => item.Code)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Position)
        </td>
    </tr>

}

然后使用 JavaScript 隐藏和显示子行

<script>
    function toggle1(something) {
        $("#bluh_"+something).toggleClass('hidden');
    }
</script>

【讨论】：