Question

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

Answer 1

使用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";
    }
}

Answer 2

将所有<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";
        }
    }
}

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

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

3 个答案: