2

我有一些看起来相当简单的东西，但我很难过。我想要一个影响显示多少表行的表中的下拉列表。默认情况下，仅显示 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>
        ​
4

3 回答 3

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");
    });
}

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

编辑

这是一个非 jQuery 版本：

function toggle() {
    var rows = document.getElementsByName("toggleText");
    for(var i=0; i<rows.length; i++)
    {
        rows[i].className = (rows[i].className == "hiddenRow") ? "" : "hiddenRow";
    }
}
于 2013-01-02T22:46:41.813 回答
0

将所有更改<tr id="toggleText"为<tr name="toggleText"，然后将切换功能更改为以下内容：

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";
        }
    }
}
于 2013-01-02T22:21:12.130 回答
0

您可以通过给每一行一个像这样的 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>
于 2017-08-30T10:07:49.120 回答