jQuery的.Toggle（）的基礎上COLGROUP山坳ID

小提琴是here。jQuery的.Toggle（）的基礎上COLGROUP山坳ID

我無法抓住由COLGROUP的山坳ID的實際列切換它。我有正確匹配的索引，但我不明白我如何使用colgroup的力量來抓取整個列。這是我當前的嘗試（在用小提琴底部一路）：

//Column Button Hider 
    $('fieldset.techtable input.column[type=checkbox]').on('change', function() { 
     var index = $(this).prevAll('input.column').length+2; 
     console.log(index); 
     $('fieldset.techtable' #col'+index').toggle() 
      //($('#col'+index).toggle()); 
    });

，這裏是表和COLGROUP：我想嘗試利用COLGROUP的功率

<section class="techtable"> 
     <h1>Technologies/Compliance/Certifications</h1> 
     <table cellspacing="0"> 
      <colgroup> 
       <col id="col0"> 
       <col id="col1"> 
       <col id="col2"> 
       <col id="col3"> 
       <col id="col4"> 
       <col id="col5"> 
       <col id="col6"> 
      </colgroup> 
      <thead> 
       <tr> 
        <th>Category</th> 
        <th>Skill</th> 
        <th>Version(s)</th> 
        <th>Start Date</th> 
        <th>End Date</th> 
        <th>Elapsed Time</th> 
        <th>Expertise Rating</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Technology</td> 
        <td>J2EE</td> 
        <td>1.5, 1.6, 1.7</td> 
        <td>November, 2011</td> 
        <td></td> 
        <td></td> 
        <td>2</td> 
       </tr> 
       </tr>...repeating...</tr> 
      </tbody> 
     </table> 
    </section>

，但我不確定是否應該使用class ID（如果是這樣，col組的id，<th>？或每個<td>？）。

是<th> s的的<colgroup>干擾？也許措辭更好，我應該引用th而不是嘗試使用colgroup？

在正確的語法方向上的一個點是有幫助的，並且幫助的一行代碼總是被讚賞，但是對於這個，我試圖避免將其擴展到更多行代碼中，除非我忽略了方法。我是在假設我不只是正確地抓住col ID，但你的反饋可能證明我錯了。

來源

2012-06-11 chris Frisina

'fieldset.techtable'在哪裏？我看到的全部是'section.techtable' –

您是否試圖通過隱藏colgroup中的col來隱藏整個表格列？我無法在小提琴上做任何事情。 http://jsfiddle.net/HvGLu/至於你關於'th'的問題，隱藏'th'不會隱藏它對應的'td'，它們每個都必須單獨隱藏。 –

如果你想隱藏特定的數據列，隱藏在colgroup內山坳不會這樣做。

var colIndex = 0; // first column 
$(myTable).find("td,th").filter(":nth-child(" + (colIndex+1) + ")").toggle();

我已修改此代碼以便與您的表一起使用。下面是更新fiddle

var index = $(this).prevAll('input.column').length+2; 
$('colgroup').parent('table').find("td,th").filter(":nth-child(" + (index+1) + ")").toggle();

來源

2012-06-11 20:06:57

感謝您提供colgroup不會隱藏它的信息。我想這就是爲什麼我一直在敲我的頭超過2個小時。非常感謝你幫助一個非常小的開發者。 –

你想要做到這一點嗎？

$('fieldset.techtable #col' + index).toggle();

由於ID是在頁面獨特的，它通常是不夠的，只是目標是：

來源

2012-06-11 19:39:59 Guffa

是的，它不起作用，雖然你的生產線有一對額外的單引號。 –

@chrisFrisina：其實我刪除了一對apostophes。 – Guffa

哎呀，我的錯誤，引用了對方的錯誤。第二個示例正確選擇了正確的colgroup，但沒有任何反應。 .toggle（）可以應用於colgroup嗎？ –

嘗試以下操作：

$（「techtable TD：第n個孩子（」+指數+ 1 +「）」）。切換（）;

看到這個上：Hide/Show Column in an HTML Table

來源

2012-06-11 20:08:37 Michael

我不認爲你可以切換列的知名度，因爲列更多的元數據/僞元素比在頁面上實際元素（它實際上是第N tr每個td你試圖切換）。我知道有這些問題，因爲這個原因試圖一致地設計風格（見my answer here的解釋/調查）。

來源

2012-06-11 20:10:21 WickyNilliams

jQuery的.Toggle（）的基礎上COLGROUP山坳ID

回答

相關問題