Javascript HTML表格-在浏览器中隐藏列而不影响colspans
在我的网站上，我有一个HTML表格，可在多个网页上重复使用，它是动态生成的，表格的HTML不能轻易更改，但是我需要在某些网页上隐藏表格上的一列 问题是该表有一些列跨距-是否可以在不影响列跨距的情况下隐藏列？例如，通过CSS或JavaScript等 我不希望显示列，也不希望在隐藏列时表中出现任何间隙 提前谢谢 示例表：Javascript HTML表格-在浏览器中隐藏列而不影响colspans,javascript,html,css,xhtml,html-table,Javascript,Html,Css,Xhtml,Html Table,在我的网站上，我有一个HTML表格，可在多个网页上重复使用，它是动态生成的，表格的HTML不能轻易更改，但是我需要在某些网页上隐藏表格上的一列 问题是该表有一些列跨距-是否可以在不影响列跨距的情况下隐藏列？例如，通过CSS或JavaScript等 我不希望显示列，也不希望在隐藏列时表中出现任何间隙 提前谢谢 示例表： <table class="DDGridView" cellspacing="0" cellpadding="6" rules="all" border="1
<table class="DDGridView" cellspacing="0" cellpadding="6" rules="all" border="1" id="ContentPlaceHolder1_GridView1" style="border-collapse:collapse;">
<tr class="th">
<th scope="col"> </th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Sort$Page.Ref')">Parent</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Sort$Ref')">Page</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Sort$HtmlAnchor')">Anchor</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Sort$Weight')">Weight</a></th><th scope="col">Children</th>
</tr><tr class="td">
<td>
<a href="/WAS-Li/MainMenus/Edit.aspx?Id=1">Edit</a> <a onclick="return confirm("Are you sure you want to delete this item?");" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl02$ctl01", "", true, "", "", false, true))">Delete</a> <a href="/WAS-Li/MainMenus/Details.aspx?Id=1">Details</a>
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___Page_0_HyperLink1_0"></a>
</td><td style="white-space:nowrap;">Page #1: Home
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_0_HyperLink1_0" title="TBD" href="http://www.eriks.co.uk/Linear/Home/1">Home</a>
</td><td style="white-space:nowrap;">0
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___MainMenus_0_HyperLink1_0" href="/WAS-Li/MainMenus/List.aspx?ParentId=1">View</a>
</td>
</tr><tr class="td">
<td>
<a href="/WAS-Li/MainMenus/Edit.aspx?Id=2">Edit</a> <a onclick="return confirm("Are you sure you want to delete this item?");" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl03$ctl01", "", true, "", "", false, true))">Delete</a> <a href="/WAS-Li/MainMenus/Details.aspx?Id=2">Details</a>
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___Page_1_HyperLink1_1" href="/WAS-Li/MainMenus/Details.aspx?Id=1">Page #1: Home</a>
</td><td style="white-space:nowrap;">Page #2: Linear Know-How
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_1_HyperLink1_1" title="Linear Bearing Know-How" href="http://www.eriks.co.uk/Linear/Linear-Know-How/2">Linear Know-How</a>
</td><td style="white-space:nowrap;">100
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___MainMenus_1_HyperLink1_1" href="/WAS-Li/MainMenus/List.aspx?ParentId=2">View</a>
</td>
</tr><tr class="td">
<td>
<a href="/WAS-Li/MainMenus/Edit.aspx?Id=3">Edit</a> <a onclick="return confirm("Are you sure you want to delete this item?");" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl04$ctl01", "", true, "", "", false, true))">Delete</a> <a href="/WAS-Li/MainMenus/Details.aspx?Id=3">Details</a>
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___Page_2_HyperLink1_2" href="/WAS-Li/MainMenus/Details.aspx?Id=1">Page #1: Home</a>
</td><td style="white-space:nowrap;">Page #3: Products and Services
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_2_HyperLink1_2" title="Linear Bearing Products and Services" href="http://www.eriks.co.uk/Linear/Products-and-Services/3">Products and Services</a>
</td><td style="white-space:nowrap;">90
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___MainMenus_2_HyperLink1_2" href="/WAS-Li/MainMenus/List.aspx?ParentId=3">View</a>
</td>
</tr><tr class="td">
<td>
<a href="/WAS-Li/MainMenus/Edit.aspx?Id=4">Edit</a> <a onclick="return confirm("Are you sure you want to delete this item?");" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl05$ctl01", "", true, "", "", false, true))">Delete</a> <a href="/WAS-Li/MainMenus/Details.aspx?Id=4">Details</a>
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___Page_3_HyperLink1_3" href="/WAS-Li/MainMenus/Details.aspx?Id=1">Page #1: Home</a>
</td><td style="white-space:nowrap;">Page #4: Key Brands and Partners
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_3_HyperLink1_3" title="Key Brands and Partners" href="http://www.eriks.co.uk/Linear/Key-Brands-and-Partners/4">Key Brands and Partners</a>
</td><td style="white-space:nowrap;">80
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___MainMenus_3_HyperLink1_3" href="/WAS-Li/MainMenus/List.aspx?ParentId=4">View</a>
</td>
</tr><tr class="td">
<td>
<a href="/WAS-Li/MainMenus/Edit.aspx?Id=5">Edit</a> <a onclick="return confirm("Are you sure you want to delete this item?");" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl06$ctl01", "", true, "", "", false, true))">Delete</a> <a href="/WAS-Li/MainMenus/Details.aspx?Id=5">Details</a>
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___Page_4_HyperLink1_4" href="/WAS-Li/MainMenus/Details.aspx?Id=1">Page #1: Home</a>
</td><td style="white-space:nowrap;">Page #5: Sustainability
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_4_HyperLink1_4" title="Linear Bearing Sustainability" href="http://www.eriks.co.uk/Linear/Sustainability/5">Sustainability</a>
</td><td style="white-space:nowrap;">50
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___MainMenus_4_HyperLink1_4" href="/WAS-Li/MainMenus/List.aspx?ParentId=5">View</a>
</td>
</tr><tr class="td">
<td>
<a href="/WAS-Li/MainMenus/Edit.aspx?Id=6">Edit</a> <a onclick="return confirm("Are you sure you want to delete this item?");" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl07$ctl01", "", true, "", "", false, true))">Delete</a> <a href="/WAS-Li/MainMenus/Details.aspx?Id=6">Details</a>
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___Page_5_HyperLink1_5" href="/WAS-Li/MainMenus/Details.aspx?Id=1">Page #1: Home</a>
</td><td style="white-space:nowrap;">Page #6: Key Sectors & Applications
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_5_HyperLink1_5" title="Bearing Sectors & Applications" href="http://www.eriks.co.uk/Linear/Key-Sectors-Industries/6">Key Sectors & Applications</a>
</td><td style="white-space:nowrap;">70
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___MainMenus_5_HyperLink1_5" href="/WAS-Li/MainMenus/List.aspx?ParentId=6">View</a>
</td>
</tr><tr class="td">
<td>
<a href="/WAS-Li/MainMenus/Edit.aspx?Id=7">Edit</a> <a onclick="return confirm("Are you sure you want to delete this item?");" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl08$ctl01", "", true, "", "", false, true))">Delete</a> <a href="/WAS-Li/MainMenus/Details.aspx?Id=7">Details</a>
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___Page_6_HyperLink1_6" href="/WAS-Li/MainMenus/Details.aspx?Id=1">Page #1: Home</a>
</td><td style="white-space:nowrap;">Page #7: Innovation & New Products
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_6_HyperLink1_6" title="New products & innovations from ERIKS UK and our partners" href="http://www.eriks.co.uk/Linear/Innovation-New-Products/7">Innovation & New Products</a>
</td><td style="white-space:nowrap;">60
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___MainMenus_6_HyperLink1_6" href="/WAS-Li/MainMenus/List.aspx?ParentId=7">View</a>
</td>
</tr><tr class="td">
<td>
<a href="/WAS-Li/MainMenus/Edit.aspx?Id=8">Edit</a> <a onclick="return confirm("Are you sure you want to delete this item?");" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl09$ctl01", "", true, "", "", false, true))">Delete</a> <a href="/WAS-Li/MainMenus/Details.aspx?Id=8">Details</a>
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___Page_7_HyperLink1_7" href="/WAS-Li/MainMenus/Details.aspx?Id=2">Page #2: Linear Know-How</a>
</td><td style="white-space:nowrap;">Page #8: Fitting
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_7_HyperLink1_7" title="Linear Bearing Fitting" href="http://www.eriks.co.uk/Linear/Fitting/8">Fitting</a>
</td><td style="white-space:nowrap;">90
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___MainMenus_7_HyperLink1_7" href="/WAS-Li/MainMenus/List.aspx?ParentId=8">View</a>
</td>
</tr><tr class="td">
<td>
<a href="/WAS-Li/MainMenus/Edit.aspx?Id=9">Edit</a> <a onclick="return confirm("Are you sure you want to delete this item?");" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl10$ctl01", "", true, "", "", false, true))">Delete</a> <a href="/WAS-Li/MainMenus/Details.aspx?Id=9">Details</a>
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___Page_8_HyperLink1_8" href="/WAS-Li/MainMenus/Details.aspx?Id=2">Page #2: Linear Know-How</a>
</td><td style="white-space:nowrap;">Page #9: Lubricating
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_8_HyperLink1_8" title="Linear Bearing Lubrication" href="http://www.eriks.co.uk/Linear/Lubrication/9">Lubricating</a>
</td><td style="white-space:nowrap;">90
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___MainMenus_8_HyperLink1_8" href="/WAS-Li/MainMenus/List.aspx?ParentId=9">View</a>
</td>
</tr><tr class="td">
<td>
<a href="/WAS-Li/MainMenus/Edit.aspx?Id=10">Edit</a> <a onclick="return confirm("Are you sure you want to delete this item?");" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl11$ctl01", "", true, "", "", false, true))">Delete</a> <a href="/WAS-Li/MainMenus/Details.aspx?Id=10">Details</a>
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___Page_9_HyperLink1_9" href="/WAS-Li/MainMenus/Details.aspx?Id=2">Page #2: Linear Know-How</a>
</td><td style="white-space:nowrap;">Page #10: Monitoring
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_9_HyperLink1_9" title="Linear Bearing Condition Monitoring" href="http://www.eriks.co.uk/Linear/Condition-Monitoring/10">Condition Monitoring</a>
</td><td style="white-space:nowrap;">70
</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___MainMenus_9_HyperLink1_9" href="/WAS-Li/MainMenus/List.aspx?ParentId=10">View</a>
</td>
</tr><tr class="DDFooter">
<td colspan="6">
<div class="DDPager">
<span class="DDFloatLeft">
<input type="image" name="ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonFirst" id="ContentPlaceHolder1_GridView1_ctl00_ImageButtonFirst" title="First page" src="../DynamicData/Content/Images/PgFirst.gif" alt="First page" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonFirst", "", true, "", "", false, false))" style="height:9px;width:8px;" />
<input type="image" name="ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonPrev" id="ContentPlaceHolder1_GridView1_ctl00_ImageButtonPrev" title="Previous page" src="../DynamicData/Content/Images/PgPrev.gif" alt="Previous page" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonPrev", "", true, "", "", false, false))" style="height:9px;width:5px;" />
<label for="ContentPlaceHolder1_GridView1_ctl00_TextBoxPage" id="ContentPlaceHolder1_GridView1_ctl00_LabelPage">Page </label>
<input name="ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$TextBoxPage" type="text" value="1" size="5" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$TextBoxPage\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="ContentPlaceHolder1_GridView1_ctl00_TextBoxPage" class="DDControl" style="width:20px;" />
of
<span id="ContentPlaceHolder1_GridView1_ctl00_LabelNumberOfPages">4</span>
<input type="image" name="ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonNext" id="ContentPlaceHolder1_GridView1_ctl00_ImageButtonNext" title="Next page" src="../DynamicData/Content/Images/PgNext.gif" alt="Next page" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonNext", "", true, "", "", false, false))" style="height:9px;width:5px;" />
<input type="image" name="ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonLast" id="ContentPlaceHolder1_GridView1_ctl00_ImageButtonLast" title="Last page" src="../DynamicData/Content/Images/PgLast.gif" alt="Last page" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonLast", "", true, "", "", false, false))" style="height:9px;width:8px;" />
</span>
<span class="DDFloatRight">
<label for="ContentPlaceHolder1_GridView1_ctl00_DropDownListPageSize" id="ContentPlaceHolder1_GridView1_ctl00_LabelRows">Results per page:</label>
<select name="ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$DropDownListPageSize" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$DropDownListPageSize\',\'\')', 0)" id="ContentPlaceHolder1_GridView1_ctl00_DropDownListPageSize" class="DDControl">
<option value="5">5</option>
<option selected="selected" value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</span>
</div>
</td>
</tr>
</table>
儿童
0
第2页：线性专有技术
100
第3页：产品和服务
90
第4页：主要品牌和合作伙伴
80
第5页：可持续性
50
第6页：关键部门和；应用
70
第7页：创新与创新；新产品
60
第8页：安装
90
第9页：润滑
90
第10页：监测
70
页
属于
4.
每页结果：
5.
10
15
20
$([selector]).attr('colspan',2);
正在运行请提供您的代码。td:nth child（2）{display:none；}@SuperHornet您想让我发布表格的HTML吗？@gp这将影响colspan。不是吗？@Chris Cannon是的，我需要知道colspans在哪里以及值是什么-表格是动态的！如何创建表格？您可以在生成/更改表后对列进行计数，并在感兴趣的tds上测试colspan。如何使用jQuery对列进行计数？将$（“tr”）更改为$（“#contentplaceholder 1_gridview 1 tr”）或$（“.DDGridView tr”）
var colIndexToHide = 1;
$("tr").each(function (i, tr) {
var cindex = -1;
var done = false;
$(tr).find("td").each(function (j, td) {
if (done) return;
if (cindex + td.colSpan >= colIndexToHide) {
if (td.colSpan > 1) {
td.colSpan--;
} else {
$(td).hide();
}
done = true;
}
cindex += td.colSpan;
});
});