Jquery/Js - 在Repeater的Gridview中查找列 - 隐藏它们

Question

我不确定要从这个开始，所以如果您需要更多信息，请询问。

我有一个 .aspx 页面。它上面有一个 asp:repeater，并且在该转发器中有一个 asp:gridview。

每个转发器显示不同产品的详细信息。然后，该中继器中的每个网格视图都有 x 列来显示名称、价格等。列数各不相同，但开头有 4 个，总是相同的。

我在后面的代码中获得了这 4 列的名称，并将它们添加到页面顶部的“选择”（下拉）中。

这个想法是在这 4 列中一次只显示 1 列，即在下拉列表中选择的那一列。

假设我的老板是一个“非常灵活的人”并且不想改变页面的结构，即中继器和网格视图，并希望我使用一些 js/jquery（客户端 - 即不是另一个调用数据库。-所有信息都位于页面上，并在客户端上显示或隐藏）。

我尝试过的......

var singleValues = document.getElementById('<%= deliveryoption.ClientID %>').value;

从下拉列表中获取值——这部分有效。注意：将使用此值与列标题（在“th”标签中）进行比较。

注意：整个表格有一个 CSS 类 gridDetails 和列 td 和标题是 th - 显然......：P

现在....以下似乎有效

---

$('.gridDetails td').click(function () {

var singleValues = document.getElementById('<%= deliveryoption.ClientID %>').value;

var col = $(this).prevAll().length; //$(this).index; // does the same...?

var header = $(this).parents('table').find('th:nth-child(' + (col + 1) + ')');

alert(header.text());  // for testing ....

var rowIndex = col + 1;

if (header.text() == singleValues) {

$('td:nth-child(' + rowIndex + '), th:nth-child(' + rowIndex + ')').hide();

}

---

问题在于它是在click 的事件上。

如何将其更改为在onchange 的事件中进行下拉。我知道“如何”在代码中做到这一点以绑定到下拉大声笑，我的意思是，代码中对this 的引用就是下拉，它不会找到列等... .

要明确一点： - 外面有一个 runat=server div - 然后有一个中继器 - 然后在中继器内有 1 个或多个网格视图

我已经阅读了 jquery 中的 .proxy()，但我认为这在这种情况下不会有帮助...

我想就是这样......如果我错过了什么，请告诉我......

提前致谢

干杯 罗宾

编辑

页面

<div>
<select name="deliveryoption" id="deliveryoption" runat="server" onchange="test()">

</select>
</div>
<div id="outsidediv" runat="server" style="margin: 5px">
<asp:Repeater ID="SizeSelectionRepeater" runat="server" OnItemDataBound="SizeSelectionRepeater_ItemDataBound">
    <ItemTemplate>
        <table cellpadding="3">
            <tr>
                <td>
                    <asp:Label ID="LabelProductCode" runat="server"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="LabelPackageQuantity" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
        <asp:Panel ID="SizeSelectionPanel" runat="server">
        </asp:Panel>
        <asp:GridView ID="SizeSelectionGridView" runat="server" CssClass="gridDetails" OnRowDataBound="SizeSelectionGridView_RowDataBound"
            AutoGenerateColumns="false" Width="100%">
            <Columns>
                <asp:TemplateField HeaderText="Price">
                    <ItemTemplate>
                        <div style="vertical-align: middle;">
                            <asp:Label ID="PriceLabelSpecial" runat="server" Width="30%" Style="display: inline;"></asp:Label>
                            <asp:Label ID="PriceLabel" runat="server"></asp:Label>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Add to Cart">
                    <ItemTemplate>
                        <table width="300px" style="border-style: none;">
                            <tr>
                                <td valign="middle" style="border-style: none;">
                                    <asp:LinkButton ID="ButtonAdd" runat="server" Width="120px" Height="22px" 
                                    CssClass="buynow">Buy now</asp:LinkButton>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <br />
    </ItemTemplate>
</asp:Repeater>
</div>

Answer 1

据我了解，您可以这样做：

$('#<%= deliveryoption.ClientID %>').change(function(){
    var singleValues = $(this).val();
    var thOfColumnThatShouldBeHidden = $(".gridDetails th:contains('" + singleValues + "')");
})

你已经拥有的一切。现在你可以像现在一样使用thOfColumnThatShouldBeHidden 找到col，但不使用$(this) 要找到所需的TH，我正在使用:contains() 选择器