javascript - HTML 表格 - 在浏览器中隐藏列而不影响 colspans

Question

在我的网站上，我有一个在多个网页上重复使用的 HTML 表格，它是动态生成的，表格的 HTML 不能轻易更改，但是我需要在某些网页上隐藏表格中的一列.

问题是表格有一些列跨度 - 是否可以在不影响列跨度的情况下隐藏列？例如。通过 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>

Answer 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