我有一個包含幾列的HTML表，我需要使用jquery實現一個列選擇器。 當用戶單擊復選框時，我要隱藏/顯示表中的相應列。 我想在不將類附加到表中的每個td的情況下執行此操作，是否可以使用jquery選擇整個列？ 以下是HTML的示例。

Header 1Header 2Header 3

Column1Column2Column3Column1Column2Column3Column1Column2Column3Column1Column2Column3

Hide/Show Column 1

Hide/Show Column 2

Hide/Show Column 3

希望以下網站對您有所幫助：fiendish.demon.co.uk/html/javascript/hidetablecols.html

我使用jQuery實現了該解決方案，并且對我來說效果非常好：http：//www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html

每個用戶344059的評論，這是斷開的鏈接的Web存檔http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html

使用jQuery的一行代碼隱藏了第二列：

$('td:nth-child(2)').hide();

如果您的表具有header(th)，請使用此命令：

$('td:nth-child(2),th:nth-child(2)').hide();

資料來源：用單行jQuery代碼隱藏表格列

jsFiddle測試代碼：http://jsfiddle.net/mgMem/1/

如果您想查看一個好的用例，請看一下我的博客文章：

隱藏表列，并使用jQuery根據值對行著色。

順便說一句，在示例中沒有，是否沒有忽略colspans的問題？好，如果您不使用它們。還有另一個相關問題：stackoverflow.com/questions/1166452/

我必須將tbody添加到選擇器中，以避免用尋呼機隱藏頁腳：$(。webgrid tbody td：nth-??child(1)，.webgrid th：nth-??child(1))。hide();

@KimR這可能有助于解決colspan問題stackoverflow.com/questions/9623601/

我不知道為什么，但是我不得不使用nth-of-type來使其工作。例如：$(table td：nth-??of-type(2))。hide();

@LeopoldoSanczyk您使用的是Safari嗎？似乎需要第n個類型

@ykay我忘了提及我使用的是Firefox。從日期來看，是32.0.X還是封閉版本。

@LeopoldoSanczyk好吧，我問，因為當客戶要求他的網站在野生動物園工作時，我碰到了這一點。 Firefox也可能一樣

注意：使用$(.mycol).closest(th).index()獲取索引時，您必須添加1，因為nth-child從1開始！所以colIdx = $(.mycol).closest(th).index() + 1

I would like to do this without attaching a class to every td

就我個人而言，我會采用"每課時上課/上課/上課"的方法。然后，您可以通過對容器上的className的一次寫操作來打開和關閉列，并假設樣式規則如下：

table.hide1 .col1 { display: none; }

table.hide2 .col2 { display: none; }

...

這將比任何JS循環方法都要快。對于非常長的表，它可以對響應能力產生重大影響。

如果可以擺脫不支持IE6的困擾，則可以使用鄰接選擇器來避免將類屬性添加到tds。或者，如果您擔心使標記更整潔，則可以在初始化步驟中從JavaScript自動添加它們。

感謝您的建議，我一直想保持HTML的整潔，但是當表的大小接近100行時，性能無疑成為一個問題。該解決方案將性能提高了2-5倍。

在性能方面，這種方法對我來說是個奇跡。謝謝！

我將此添加到css .hidden {display:none;}中并使用了.addClass(hidden)和.removeClass(hidden)，這比.hide()和.show()快一點。

您可以使用colgroups：

Header 1Header 2Header 3

Column1Column2Column3Column1Column2Column3Column1Column2Column3Column1Column2Column3

然后，您的腳本可能只更改了欲望

類。

我似乎記得colgroup沒有跨瀏覽器的支持，這不再是事實嗎？

也許。我在hilight列上使用此方法，(firefox，safari，chrome正常工作)從未在IE中嘗試過。

@Brian-IE8無法正常工作，啟用IE7的IE8似乎可以正常工作。

在現代瀏覽器(Chrome和Firefox)中，這似乎不再起作用

@JBE：確切地說，這在某種程度上可以在現代瀏覽器中使用。使用$(table > colgroup > col.yourClassHere) jQuery選擇器，您仍然可以像設置整個列的背景色一樣設置smth，但是您將無法再切換列的可見性。經過測試的瀏覽器是MSIE 11，Safari 5，Chromium 44，Opera 12，Mozilla SeaMonkey 2.40，Mozilla Firefox43。" HTML5不支持HTML 4.01中的大多數屬性"-請參見此處。

請執行以下操作：

$("input[type='checkbox']").click(function() {

var index = $(this).attr('name').substr(2);

$('table tr').each(function() {

$('td:eq(' + index + ')',this).toggle();

});

});

這是未經測試的代碼，但是原理是您在每一行中選擇與從復選框名稱中提取的所選索引相對應的表格單元格。您當然可以使用類或ID來限制選擇器。

這是功能更全的答案，它在每列的基礎上提供了一些用戶交互。如果這將是一種動態體驗，則每個列上都需要有一個可單擊的切換，以指示可以隱藏該列的能力，然后需要一種方法來還原以前隱藏的列。

在JavaScript中看起來像這樣：

$('.hide-column').click(function(e){

var $btn = $(this);

var $cell = $btn.closest('th,td')

var $table = $btn.closest('table')

// get cell location - https://stackoverflow.com/a/4999018/1366033

var cellIndex = $cell[0].cellIndex + 1;

$table.find(".show-column-footer").show()

$table.find("tbody tr, thead tr")

.children(":nth-child("+cellIndex+")")

.hide()

})

$(".show-column-footer").click(function(e) {

var $table = $(this).closest('table')

$table.find(".show-column-footer").hide()

$table.find("th, td").show()

})

為此，我們將在表中添加一些標記。在每個列標題中，我們可以添加類似的內容以提供可點擊內容的可視指示

data-toggle="tooltip" data-placement="bottom" title="Hide Column">

我們將允許用戶通過表格頁腳中的鏈接還原列。如果默認情況下它不是持久性的，則在表頭中動態切換它可能會在表中產生混亂，但您實際上可以將其放置在所需的任何位置：

Some columns hidden - click to show all

這是基本功能。這是下面的演示，還有更多細節。您還可以在按鈕上添加工具提示，以幫助闡明按鈕的用途，將按鈕有機地設置為表格標題，并折疊列寬，以添加一些(有點怪異)的css動畫以使過渡少一些跳動的。

jsFiddle和Stack片段中的工作演示：

$(function() {

// on init

$(".table-hideable .hide-col").each(HideColumnIndex);

// on click

$('.hide-column').click(HideColumnIndex)

function HideColumnIndex() {

var $el = $(this);

var $cell = $el.closest('th,td')

var $table = $cell.closest('table')

// get cell location - https://stackoverflow.com/a/4999018/1366033

var colIndex = $cell[0].cellIndex + 1;

// find and hide col index

$table.find("tbody tr, thead tr")

.children(":nth-child(" + colIndex +")")

.addClass('hide-col');

// show restore footer

$table.find(".footer-restore-columns").show()

}

// restore columns footer

$(".restore-columns").click(function(e) {

var $table = $(this).closest('table')

$table.find(".footer-restore-columns").hide()

$table.find("th, td")

.removeClass('hide-col');

})

$('[data-toggle="tooltip"]').tooltip({

trigger: 'hover'

})

})

body {

padding: 15px;

}

.table-hideable td,

.table-hideable th {

width: auto;

transition: width .5s, margin .5s;

}

.btn-condensed.btn-condensed {

padding: 0 5px;

box-shadow: none;

}

/* use class to have a little animation */

.hide-col {

width: 0px !important;

height: 0px !important;

display: block !important;

overflow: hidden !important;

margin: 0 !important;

padding: 0 !important;

border: none !important;

}

Controller

Action

Type

Attributes

HomeIndexActionResultAuthorizeClientIndexActionResultAuthorizeClientEditActionResultAuthorizeSome columns hidden - click to show all

您正在隱藏最近的1列，如何隱藏最近的3列？

檢查我的表格-i.stack.imgur.com/AA8iZ.png和包含表格html的問題-stackoverflow.com/questions/50838119/按鈕將在A，B和C之后

很抱歉，無法恢復這樣的舊答案，但是是否有一種簡單的方法可以將某些列默認設置為隱藏？我試圖用$(document).ready這樣做但沒有運氣

@RobotJohnny，好問題。這使用類.hide-col刪除列，但是它也可以用于指示狀態，因此您可以-在呈現html時將.hide-col添加到每個td和tr中并完成操作。或者，如果您想將其添加到更少的位置，則將其放置在標題中(該狀態必須到某個地方)，并在初始化時使用它在子級中隱藏該列索引。當前，代碼只是偵聽單擊位置，但也可以對其進行修改以查找類位置。還有，土耳其快樂的一天

@RobotJohnny，我更新了代碼示例以包括初始化處理。 只需將class=hide-col放到html中您想要的任何位置(可能在thead > tr > th中最有意義，它將進行選擇以確保它隱藏了該列中的所有單元格并動態顯示了還原頁腳

隱藏任何列時如何保持列寬固定？

@sjain，演示中的表的寬度設置為100%，因此，當刪除列時，其他列將占據該空間。 一種方法是不讓表格填充100％的寬度，然后每列將獨立調整大小并保留其寬度，無論可見的是什么。 這是jsFiddle中這種方法的示例

當然，對于支持nth-child的瀏覽器，CSS唯一的方法是：

table td:nth-child(2) { display: none; }

這適用于IE9及更高版本。

對于您的用例，您需要幾個類來隱藏列：

.hideCol1 td:nth-child(1) { display: none;}

.hideCol2 td:nth-child(2) { display: none;}

等等...

First Name

....

...

$(document).ready(function() {

$('#demo').multiselect();

});

$("input:checkbox:not(:checked)").each(function() {

var column ="table ." + $(this).attr("name");

$(column).hide();

});

$("input:checkbox").click(function(){

var column ="table ." + $(this).attr("name");

$(column).toggle();

});

以下內容基于Eran的代碼進行了一些小的更改。經過測試，它在Firefox 3，IE7上似乎可以正常工作。

/p>

"http://www.w3.org/TR/html4/loose.dtd">

$(document).ready(function() {

$('input[type="checkbox"]').click(function() {

var index = $(this).attr('name').substr(3);

index--;

$('table tr').each(function() {

$('td:eq(' + index + ')',this).toggle();

});

$('th.' + $(this).attr('name')).toggle();

});

});

Header 1Header 2Header 3

Column1Column2Column3Column1Column2Column3Column1Column2Column3Column1Column2Column3

Hide/Show Column 1

Hide/Show Column 2

Hide/Show Column 3

沒有課？然后，您可以使用標簽：

var tds = document.getElementsByTagName('TD'),i;

for (i in tds) {

tds[i].style.display = 'none';

}

并顯示給他們使用：

...style.display = 'table-cell';

總結

以上是生活随笔為你收集整理的html中怎样隐藏列,关于jquery：隐藏/显示HTML表中的列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。