在我的网站上，我有一个HTML表格，可以在几个网页上重复使用，这是动态生成的，并且表格的HTML不能轻易更改，但是我需要在某些网页上隐藏表格上的列
问题是该表有一些colspans - 是否可以在不影响colspans的情况下隐藏列？例如。通过CSS或JavaScript等。
我不希望列显示，我也不希望在隐藏列时我的表中有任何空白。
提前致谢。
示例表：
<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 :(得分：1)
隐藏列时，也会相应地更改colspans。例如在jQuery中：
$([selector]).attr('colspan',2);
答案 1 :(得分：1)
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;
});
});
正在运行jsfiddle