Javascript 使用下拉列表显示表中的隐藏行

我有些东西看起来很简单，但我被难住了。我希望在一个表中有一个下拉列表，它会影响显示的表行数。默认情况下，仅显示2行。通过在下拉列表中选择4，应显示4行。我只看到其中一个隐藏行出现，我也尝试将这两行包装在一个隐藏的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>
        ​

2.
4.
项目
日期
时间
人
12/3
12:45
无名氏
12/4
12:45
詹姆斯·多伊
12/4
12:45
珍妮·多伊
12/4
12:45
珍妮·多伊
函数切换（）{
var ele=document.getElementById（“toggleText”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
}
否则{
ele.style.display=“块”；
}
} 
​

使用

显示：块更改所有
不起作用，因为表格行将以不正确的方式显示。但是您可以通过添加和删除类来切换可见性，该类由
display:none。因此，您不能切换
显示：无/块，但是类

这项工作（包括jQuery）：

对于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";
    }
}

函数切换（）{
var rows=document.getElementsByName（“toggleText”）；
对于（var i=0；i，您可以通过为每一行提供如下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>

}


@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modeleItem=>item.Code）
@DisplayFor（modelItem=>item.Position）
}


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

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


功能切换1（某物）{
$（“#bluh"+某物）。toggleClass（'hidden'）；
}
getElementById只会得到一个元素您的问题与此问题非常相似：不要使用属性
id
来标识一组元素。id应该是唯一的，并且不重复。问题根本不是id，而是显示属性的用法（请参阅下面我的答案）很抱歉反应太晚。效果很好，非常感谢。
<script>
    function toggle1(something) {
        $("#bluh_"+something).toggleClass('hidden');
    }
</script>