2013-08-22 70 views
0

在我的網站上,我有一個HTML表格,可以在多個網頁上重複使用,這是動態生成的,並且表格的HTML不能輕易更改,但是我需要在某些網頁上隱藏表格中的一列。HTML表格 - 在瀏覽器中隱藏列而不影響colspans

問題是表中有一些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">&nbsp;</th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$GridView1&#39;,&#39;Sort$Page.Ref&#39;)">Parent</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$GridView1&#39;,&#39;Sort$Ref&#39;)">Page</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$GridView1&#39;,&#39;Sort$HtmlAnchor&#39;)">Anchor</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$GridView1&#39;,&#39;Sort$Weight&#39;)">Weight</a></th><th scope="col">Children</th> 
      </tr><tr class="td"> 
       <td> 
          <a href="/WAS-Li/MainMenus/Edit.aspx?Id=1">Edit</a>&nbsp;<a onclick="return confirm(&quot;Are you sure you want to delete this item?&quot;);" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl02$ctl01&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Delete</a>&nbsp;<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>&nbsp;<a onclick="return confirm(&quot;Are you sure you want to delete this item?&quot;);" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl03$ctl01&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Delete</a>&nbsp;<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>&nbsp;<a onclick="return confirm(&quot;Are you sure you want to delete this item?&quot;);" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl04$ctl01&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Delete</a>&nbsp;<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>&nbsp;<a onclick="return confirm(&quot;Are you sure you want to delete this item?&quot;);" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl05$ctl01&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Delete</a>&nbsp;<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>&nbsp;<a onclick="return confirm(&quot;Are you sure you want to delete this item?&quot;);" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl06$ctl01&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Delete</a>&nbsp;<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>&nbsp;<a onclick="return confirm(&quot;Are you sure you want to delete this item?&quot;);" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl07$ctl01&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Delete</a>&nbsp;<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 &amp; Applications 

</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_5_HyperLink1_5" title="Bearing Sectors &amp; 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>&nbsp;<a onclick="return confirm(&quot;Are you sure you want to delete this item?&quot;);" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl08$ctl01&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Delete</a>&nbsp;<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 &amp; New Products 

</td><td style="white-space:nowrap;"><a id="ContentPlaceHolder1_GridView1___HtmlAnchor_6_HyperLink1_6" title="New products &amp; 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>&nbsp;<a onclick="return confirm(&quot;Are you sure you want to delete this item?&quot;);" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl09$ctl01&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Delete</a>&nbsp;<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>&nbsp;<a onclick="return confirm(&quot;Are you sure you want to delete this item?&quot;);" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl10$ctl01&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Delete</a>&nbsp;<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>&nbsp;<a onclick="return confirm(&quot;Are you sure you want to delete this item?&quot;);" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl11$ctl01&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Delete</a>&nbsp;<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(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonFirst&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" style="height:9px;width:8px;" /> 
     &nbsp; 
     <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(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonPrev&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" style="height:9px;width:5px;" /> 
     &nbsp; 
     <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(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$TextBoxPage\&#39;,\&#39;\&#39;)&#39;, 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> 
     &nbsp; 
     <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(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonNext&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" style="height:9px;width:5px;" /> 
     &nbsp; 
     <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(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$ImageButtonLast&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, 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(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$GridView1$ctl13$ctl00$DropDownListPageSize\&#39;,\&#39;\&#39;)&#39;, 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

提供您的代碼,請。 –

+0

td:第n個孩子(2){ display:none; } –

+0

@SuperHornet你想讓我發佈表格的HTML嗎? –

回答

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

+0

將$(「tr」)更改爲$(「#ContentPlaceHolder1_GridView1 tr」)或$(「。DDGridView tr」) –

1

隱藏欄,也相應地改變colspans。例如jQuery中:

$([selector]).attr('colspan',2); 
+1

這就需要知道集體在哪裏,價值是什麼 - 表格是動態的! –

+0

你如何創建你的餐桌?您可以在生成/更改表格後計算您的列,然後在感興趣的tds上測試colspan。 –

+0

你如何計算使用jQuery的列? –