[英]Show and hide table column using jQuery
我從一個SO答案中看到了這個小提琴,一旦點擊一個按鈕就會隱藏一個表格列。 我想要的是完全相反的。 我希望它默認隱藏,然后單擊按鈕時顯示和隱藏(切換)。
我怎樣才能實現這一目標?
這是小提琴:
HTML:
<table id="foo">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
<button onclick='document.getElementById("foo").classList.toggle("hide2")'>Click me</button>
CSS:
#foo td {
padding: 1em;
border: 1px solid black;
}
#foo.hide2 tr > *:nth-child(2) {
display: none;
}
最初將hide2
類設置為元素或執行一次toggle語句。
#foo td { padding: 1em; border: 1px solid black; } #foo.hide2 tr > td:nth-child(2) { display: none; }
<table id="foo" class="hide2"> <!------------^^^^^^^^^^^--> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> <button onclick='document.getElementById("foo").classList.toggle("hide2")'>Click me</button>
我知道如何使用JQuery添加此行。
$('td:nth-child(2)').hide();
http://jsfiddle.net/bnDVS/609/
並使用CSS添加它:
#foo td:nth-child(2) { display: none;}
並改變它:
#foo.hide2 tr > td:nth-child(2) {
display: none;
}
至:
#foo.hide2 tr > td:nth-child(2) {
display: table-cell;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.