0
我有一張表（因爲在試圖隱藏列時報頭偏移1，所以無法使用），每列都有自己的col id =「」。我想在下面的代碼中使用jquery來選擇表格中的列並將它們關閉和打開。如何使用jquery選擇col id以通過css隱藏
下面是表：
<article class="technical">
<div id="technical-container">
<h1><span id="technology">Technologies</span>/<span id="compliance">Compliance</span>/<span id="certification">Certification</span></h1>
<table id="tech-table" cellspacing="0">
<colgroup>
<col>
<col id="type" class="type">
<col id="name">
<col id="startdate">
<col id="currentenddate">
<col id="elapsed">
<col id="version">
<col id="rating">
<col id="project">
</colgroup>
<tbody>
<tr>
<td>type</td>
<td>Name</td>
<td>Start Date</td>
<td>Current/End Date</td>
<td>Elapsed</td>
<td>Version(s)</td>
<td>Personal Rating</td>
<td>Project</td>
</tr>
<tr>
<td>technology</td>
<td>J2EE</td>
<td>November, 2011</td>
<td><span id="current"></span></td>
<td>TODO</td>
<td>1.5, 1.6, 1.7</td>
<td>2</td>
<td>Contractor Optimization</td>
</tr>
<tr>
<td>technology</td>
<td>JS</td>
<td>April, 2012</td>
<td><span id="current"></span></td>
<td>TODO</td>
<td>?</td>
<td>1</td>
<td>Resume Builder</td>
</tr>
<tr>
<td>compliance</td>
<td>CIP</td>
<td>May, 2008</td>
<td>August, 2011</td>
<td>TODO, 3 years, 4 mos</td>
<td>n/a</td>
<td>2</td>
<td>Protection</td>
</tr>
<tr>
<td>certification</td>
<td>Red Cross</td>
<td>May, 2007</td>
<td>April, 2013</td>
<td>TODO, 6 years</td>
<td>n/a</td>
<td>3</td>
<td>Life Saving</td>
</tr>
</tbody>
</table>
</div>
</article>
這裏有獲得點擊做隱藏的按鈕：
<article>
<header>
<h1>What</h1>
<div class="mydiv">
<p1>this sections involves what I work with</p1>
</div>
</header>
<section>
<div class="mydiv">
<span id="what1"><button type="button" class="button" id="clickTech">Technologies</button></span> <span id="what2"><button type="button" class="button" id="clickComp">Compliance</button></span> <span id="what3"><button type="button" class="button" id="clickCert">Certifications</button></span>
<!-- <input type="button" class="btn" value="Technologies" id="clickTech"/-->
</div>
</section>
<section>
<h3><span id="whatsel2"><button type="button" class="button-vert" id="clickStart">Start Date</button></span></h3>
<h3><span id="whatsel3"><button type="button" class="button-vert" id="clickEnd">Current/End Date</button></span></h3>
<h3><span id="whatsel4"><button type="button" class="button-vert" id="clickElapsed">Elapsed Time</button></span></h3>
<h3><span id="whatsel5"><button type="button" class="button-vert" id="clickVersion">Version(s)</button></span></h3>
<h3><span id="whatsel6"><button type="button" class="button-vert" id="clickRating">Personal Rating</button></span></h3>
<h3><span id="whatsel7"><button type="button" class="button-vert" id="clickProject">Project</button></span></h3>
</section>
<!-- <footer>
<h2>footer</h2>
<p>footer</p>
</footer> -->
</article>
這裏是隱藏行的工作選擇：
var rowSelector = function (args) {
$("#"+args.data.type).toggle();
$("#tech-table tr").each(function(){
if ($($(this).children()[0]).text()==args.data.type) {
$(this).toggle();
}
});
};
// $("#clickTech").click({type:"technology"},generalSelector);
// assoc array is id:type
var hiders = {"#clickTech":"technology", "#clickComp":"compliance", "#clickCert":"certification"};
for (var id in hiders) {
$(id).click({type:hiders[id]}, rowSelector);
}
這是我到目前爲止與列選擇器，但需要幫助行3，4和5：
var colSelector = function (args) {
$("#"+args.data.type).toggle();
$("#tech-table col").each(function(){
if ($($(this)).text()==args.data.type) {
$(this).toggle();
}
});
};
// $("#clickTech").click({type:"technology"},generalSelector);
// assoc array is id:type
var colHiders = {"#clickStart":"Start Date", "#clickEnd":"Current/End Date", "#clickElapsed":"Elapsed Time", "#clickVersion":"Version(s)", "#clickRating":"Personal Rating", "#clickProject":"Project"};
for (var id in hiders) {
$(id).click({type:colHiders[id]}, colSelector);
}
我感謝您的指導和幫助。
你不能縮小這個問題嗎？ – gdoron