javascript - How to select col id using jquery to hide via css -
i have table (and couldn't use because header offset 1 when trying hide column) each column having own col id="". want use jquery in following code select columns within table , toggle them off , on.
here 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 buttons clicked hiding:
<article> <header> <h1>what</h1> <div class="mydiv"> <p1>this sections involves 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 working selector hiding 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 id:type var hiders = {"#clicktech":"technology", "#clickcomp":"compliance", "#clickcert":"certification"}; (var id in hiders) { $(id).click({type:hiders[id]}, rowselector); } and have far column selector, need lines 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 id:type var colhiders = {"#clickstart":"start date", "#clickend":"current/end date", "#clickelapsed":"elapsed time", "#clickversion":"version(s)", "#clickrating":"personal rating", "#clickproject":"project"}; (var id in hiders) { $(id).click({type:colhiders[id]}, colselector); } i appreciate guidance , help.
here's javascript answer though if don't want use @jatrim's css solution
var colselector = function (args) { var num = 0; var = 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 id:type var colhiders = {"#clickstart":"start date", "#clickend":"current/end date", "#clickelapsed":"elapsed time", "#clickversion":"version(s)", "#clickrating":"personal rating", "#clickproject":"project"}; (var id in colhiders) { $(id).click({type:colhiders[id]}, colselector); } also fiddle test here http://jsfiddle.net/uekcl/
Comments
Post a Comment