jquery - 计算宽度时如何省略最后一列

Question

我有以下 JQuery:

$(document).ready(function () {
    //Get the first tr
    var firstRow = $('.header');

    //Clone the first row
    firstRow.clone().attr('class', 'fixedHeader').prependTo('#ResultsTable');

    //Match the th widths of the cloned tr
    firstRow.find('th').each(function (i) {
        var thWidth = $(this).width();

        $('.fixedHeader th').eq(i).css({
            width: thWidth
        });
    });
});

代码获取第一行(标题)并复制并附加到表格并使其固定，以便表格滚动和标题保持在原位。

如何修改代码，使其复制标题的每一列，但最后一列除外。

CSS:

.fixedHeader {
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    padding: 5px 0 5px 0;
    background-color: #dce9f9;
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    width: 97.5%;
}
.gLine {
     display: none;
}

因此，如果我在一个表中有 7 列，我希望它只复制 6 列。原因是我在运行时隐藏了最后一列，因此它会计算标题并在末尾显示一个空格。

ASP.net 代码:

<asp:GridView ID="BookingResults" ClientIDMode="Static" runat="server" EnableModelValidation="True" AutoGenerateColumns="False" AllowSorting="true" ForeColor="Black" Width="100%" HeaderStyle-CssClass="header">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:Label runat="server" ID="commHdr" Text="Show Guideline" CssClass="sg" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:LinkButton runat="server" ID="btnShow3" CssClass="btnSearch3" Text="VIEW" OnClientClick="javascript:test(this);return false;"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-VerticalAlign="Top" />
        <asp:BoundField DataField="Topic" HeaderText="Topic" ItemStyle-VerticalAlign="Top" ItemStyle-CssClass="tTitle"  />
        <asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-VerticalAlign="Top" />
        <asp:BoundField DataField="Specialty" HeaderText="Specialty" ItemStyle-VerticalAlign="Top" />
        <asp:TemplateField HeaderText="Provider">
             <ItemTemplate>
                  <div id="dvHide" class="clsHide">
                       <asp:Label ID="lblEllipsis" runat="server" Text='<%#Eval("Provider") %>' ToolTip='<%#Eval("Provider") %>'></asp:Label>
                  </div>
              </ItemTemplate>
         </asp:TemplateField>
        <asp:TemplateField HeaderText="Summary" ItemStyle-VerticalAlign="Top" ItemStyle-CssClass="sumM">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Summary") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("Summary") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Guideline" HeaderText="Guideline" ItemStyle-CssClass="gLine" HeaderStyle-CssClass="gLine" />
    </Columns>
 </asp:GridView>

Answer 1

你可以使用.slice。

firstRow.find('th').slice(0, -1).each(function () {
  ...
});