我有一个由asp.net生成的网格视图。我有一个id行,我用css隐藏了它。然而,这会导致视觉问题,这里就是问题所在。
我知道这个问题是由于html中的最后一个td引起的,它看起来像这样的<td> </td>.
你可以在这张图上看到。
当我删除这行代码时,它可以工作,我的网格视图如下所示。
为什么asp会生成这个代码<td> </td>
。我怎样才能移除它呢?如果能帮上忙,我将不胜感激,谢谢。
下面是我的网格视图的代码
<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;
}
发布于 2019-06-19 08:47:07
有两种解决方案可供您删除冗余<td> </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(/( )*/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 " "
var emptytds = tds.not(descriptionTD).filter(function() {
return $(this).html() === " ";
});
//if all the remaing tds are empty
if (emptytds.length === tds.length - 1) {
emptytds.remove();
descriptionTD.prop("colspan", tds.length).prop("width", "100%");
}
});
});
发布于 2019-06-19 08:50:28
<td> </td>
这是推荐的模式,因为它可以在每个浏览器上运行。尝试不在Edge浏览器中运行表格,您将看到这破坏了表格布局。
<td>/td>
<td> </td>
https://stackoverflow.com/questions/56658693
复制相似问题