各列に独自の col id="" を持つテーブルがあります (列を非表示にしようとするとヘッダーが 1 オフセットされるため使用できません)。次のコードで jquery を使用して、テーブル内の列を選択し、オンとオフを切り替えたいと考えています。
ここに表があります：
<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);
}
ご指導とご協力をお願いいたします。