为什么在我的网格视图ASP.NET中有一个

7dl7o3gd  于 2023-11-20  发布在  .NET
关注(0)|答案(3)|浏览(122)

我有一个由ASP.NET生成的网格视图,我有一个id行,我用css隐藏了它。然而这会导致一个视觉问题,这里就是问题所在。


的数据
我知道这个问题是由于html中的最后一个td导致的,看起来像这样的<td>&nbsp;</td>.
你可以在这张图片上看到。

当我删除那行代码时,它就工作了,我的gridview看起来像这样。

为什么asp生成此代码<td>&nbsp;</td> .我如何删除它的任何帮助将非常感谢你.
下面是我的gridview的代码

<asp:GridView ID="gvLocation" runat="server" AutoGenerateColumns="false" ShowFooter="true" 
            ShowHeaderWhenEmpty="true" AllowPaging="True" OnPageIndexChanging="gvLocation_PageIndexChanging"
            OnRowEditing="gvLocation_RowEditing" OnRowCancelingEdit="gvLocation_RowCancelingEdit"
            AllowSorting="true" onsorting="gvLocation_Sorting" ridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" CellPadding="3">
            <%-- Theme Properties --%>
            <Columns>  
                <asp:TemplateField HeaderText="Armario" SortExpression="armario">
                    <ItemTemplate>
                        <asp:Label CssClass="gridTextbox" ID="lblCloset" Text='<%# Eval("armario")%>' runat="server" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox CssClass="gridTextbox" ID="txtCloset" Text='<%# Eval("armario")%>' runat="server" />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox CssClass="gridTextbox" ID="txtClosetFooter" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>  
                <asp:TemplateField HeaderText="Cajon" SortExpression="cajon">
                    <ItemTemplate>                       
                        <asp:Label CssClass="gridTextbox" ID="lblDrawer" Text='<%# Eval("cajon")%>' runat="server" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox CssClass="gridTextbox" ID="txtDrawer" Text='<%# Eval("cajon")%>' runat="server" />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox  CssClass="gridTextbox" ID="txtDrawerFooter" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>       
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ImageUrl="~/Images/edit.png" runat="server" CommandName="Edit" ToolTip="Edit" Width="20px" Height="20px"/>
                        <asp:ImageButton ImageUrl="~/Images/delete.png" runat="server" CommandName="Delete" ToolTip="Delete" Width="20px" Height="20px"  OnClick="deleteItem"/>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:ImageButton ImageUrl="~/Images/save.png" runat="server" CommandName="Update" ToolTip="Update" Width="20px" Height="20px"  OnClick="updateItem"/>
                        <asp:ImageButton ImageUrl="~/Images/cancel.png" runat="server" CommandName="Cancel" ToolTip="Cancel" Width="20px" Height="20px"/>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:ImageButton ImageUrl="~/Images/addnew.png" ID="addNewLocation" runat="server" CommandName="AddNew" ToolTip="Add New" Width="20px" Height="20px" OnClick="addNew"/>
                    </FooterTemplate>
                </asp:TemplateField>
                 <asp:TemplateField HeaderText="ubicacion id" SortExpression="ubicacion_componente_id" ItemStyle-CssClass="hideGridColumn" HeaderStyle-CssClass="hideGridColumn">
                    <ItemTemplate>
                        <asp:Label CssClass="gridTextbox" ID="lblLocationID"  Text='<%# Eval("ubicacion_componente_id")%>' runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>  
            </Columns>
        </asp:GridView>

字符串
这里添加的是隐藏第一个id列的css代码

.hideGridColumn
{
    display: none;
}

rxztt3cl

rxztt3cl1#

有2种解决方案可供您删除冗余<td>&nbsp;</td>
JavaScript版本

var table = document.getElementById("mytable");
for (var i = 0; i < 3; i++) {
  for (var k = 0; k < 5; k++) {
    var str = table.rows[i].cells[k].innerHTML;
    str = str.replace(/(&nbsp;)*/g, '');
    if (str.length) alert(str);
  }
};

字符串
How to remove   with javascript this case?
Jquery版本

$(function() {
  $("table tr").each(function() {
    var tds = $(this).find("td"); //find all td
    var descriptionTD = tds.eq(1); //get the td for the description

    //get the remaining tds that only contain "&nbsp;"
    var emptytds = tds.not(descriptionTD).filter(function() {
      return $(this).html() === "&nbsp;";
    });

    //if all the remaing tds are empty
    if (emptytds.length === tds.length - 1) {
      emptytds.remove();
      descriptionTD.prop("colspan", tds.length).prop("width", "100%");
    }
  });
});


remove that has   and make sub header

nxagd54h

nxagd54h2#

<td>&nbsp;</td>

字符串
这是推荐的模式,因为它适用于每一个浏览器。尝试在Edge Browser中不使用&nbsp运行表,你会发现这会破坏表的布局。

<td>/td>


Without '&nbsp'

<td>&nbsp;</td>


With '&nbsp'

cotxawn7

cotxawn73#

这个问题可能有很多,我设法解决了它,包括在GridView的标记。
第一个月
它解决了我的问题,我也有同样的问题。

相关问题