我有一个由asp.net生成的gridview。我有一个ID行,我已经使用CSS隐藏了它。但这会引起视觉问题,这就是问题所在。
我知道问题是由于html中的最后一个td引起的,例如<td> </td>.
当我删除该行代码时,它可以工作并且我的gridview看起来像这样。
为什么asp会生成此代码<td> </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;
}
答案 0 :(得分:0)
有2种解决方案供您删除多余的<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%");
}
});
});
答案 1 :(得分:0)
joke-async
它是推荐的模式,因为它适用于所有浏览器。尝试在Edge浏览器中不带&nbsp的情况下运行表,您会发现这破坏了表的布局。
<td> </td>
<td>/td>