在Listview的asp重复器中显示隐藏行-只隐藏第一列

Show Hide rows in asp repeater within Listview - Only hiding first column

本文关键字:隐藏 -只 一列 显示 asp Listview      更新时间:2023-09-26

我有以下ListView包含一个重复器。重复器加载三个作为列的列表,这三个列表中的每一个都包含另一个作为行的列表。

下面的工作,但只隐藏Description和第一个值列。我需要能够隐藏描述和所有三个值列

如有任何帮助,不胜感激

<asp:ListView ID="ListView1"
        runat="server" DataKeyNames="KeyName1">
        <LayoutTemplate>
            <div runat="server" id="itemPlaceholder"></div>
        </LayoutTemplate>
        <ItemTemplate>
            <div id="div1" runat="server" class="col">
                <h2>
                    <asp:Label runat="Server" Text='<%#Eval("ds1") %>' /></h2>
                <div class="premium">
                    <p>Monthly premium:</p>
                    <p>
                        <asp:Label ID="lbl1" runat="Server" />
                    </p>
                </div>
                <ul id="List1">
                        <asp:Repeater ID="rpt1" runat="server">
                            <ItemTemplate>
                                <li>
                                    <p>
                                        <asp:Label ID="Label1" runat="Server" Text='<%#Eval("Description")%>' />
                                    </p>
                                    <p>
                                        <asp:Label ID="Label2" runat="Server" Text='<%#Eval("Value")%>' />
                                    </p>
                                </li>
                            </ItemTemplate>
                        </asp:Repeater>
                    </ul>
                 </div>
                <div class="reveal">
                    <p><a id="show" href="javascript:show();">Show</a><a id="hide" href="javascript:hide();" style="display:none;">hides</a></p>
                </div>
            </div>
        </ItemTemplate>
    </asp:ListView>
我用下面的Javascript来显示和隐藏 列
window.onload = function () {
    hide();
};
function show() {
    var list = document.getElementById('List1').getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        if (i >= 5) {
            list[i].style.display = 'block';
        }
    }
    document.getElementById('hide').style.display = 'inline';
    document.getElementById('show').style.display = 'none';
}
function hide() {
    var list = document.getElementById('List1').getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        if (i >= 5) {
            list[i].style.display = 'none';
        }
    }

多亏了wizpert的建议,我让它与以下代码一起工作:-)

function hide() {
    var cnt = 0;
    $("ul li").each(function () {
        if ((cnt > 9 && cnt < 16) || (cnt > 20 && cnt < 27) || (cnt > 31 && cnt < 38)) {
            $(this).hide();
        }
        cnt++;
    });
}

我相信有更好的解决方案,如果更多的数据被加载到中继器或更多的ul标签被添加到页面脚本将打破:-)