How to select col id using jquery to hide via css
https://stackoverflow.com/questions/10904123
-
12-06-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I have a table (and couldn't use because the header is offset by 1 when trying to hide the column) with each column having its own col id="". I want to use jquery in the following code to select the columns within the table and toggle them off and on.
Here is the table :
<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>
here are the buttons that get clicked to do the hiding:
<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>
here is the working selector for hiding the rows:
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);
}
and this is what I have so far with the column selector, but need help with lines 3, 4, and 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);
}
I appreciate your guidance and help.
Solution
Here's a javascript answer for you though if you don't want to use @jatrim's css solution
var colSelector = function (args) {
var num = 0;
var i = 0;
$($("#tech-table tr")[0]).find('td').each(function(){
if ($(this).text() == args.data.type)
num=i;
i++;
});
if (num!=0){
$("#tech-table tr").each(function(){
var tds = $(this).find('td');
$(tds[num]).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 colHiders) {
$(id).click({type:colHiders[id]}, colSelector);
}
Also the fiddle to test is here http://jsfiddle.net/ueKcL/
OTHER TIPS
I think what you want is here: show/hide html table columns using css.
I particularly like this: $('td:nth-child(2)').hide(); Where 2 is the index of the column you'd like to hide.
You can probably do something like - add title (or another attribute to col tag) to col tag, and the value of title is the index of the column. So col id="name" would be
<col id="name" title="2">
ignoring the first empty col tag. then you will have to target the td using :nth-child (the title attribute) and hide them all.
You don't need to add title and still be able to figure out the index of the col but it simplifies the script using an attribute
OR
you can even pass the column index on the click of the buttons, there are a number of ways to do that as well. But eventually you still need to use :nth-child to hide the td
