0

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

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

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

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

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

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

我尝试过的......

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在桌子上。

How can I change this to be on the event of onchange for the drop down. I know 'how' to do that in the code to bind to the drop down lol, what I mean is, the reference to this in the code is then the drop down, which won't find the column etc....

Just to be clear: - there is a runat=server div around the outside - then there is a repeater - then 1 or more gridviews inside the repeater

I have read about the .proxy() in jquery but I don't think this will help in this case...

I think that is it... let me know if I missed anything...

Thanks in advance

Cheers Robin

edit

The page

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

1 回答 1

0

As I understand, you can just do something like this:

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

Everything else you already have. Now you can find col using thOfColumnThatShouldBeHidden the same way you do it now, but without using $(this) To find required TH I'm using :contains() selector

于 2012-09-14T22:48:40.020 回答