jQuery - Table > Hide entire Column, Toggle CSS classes for onClick TD and Checkbox with selected/highlighted Counter -

-

i looking jquery table multiple functionalities below.

1. onclick on hide column 1 checkboxes @ top, entire column of relevant table should hidden except first column (checkboxes column)

2. onclick of inside tbody tr td except checkbox, should apply "highlighttr" class relevant tr element , onclick of inside tbody tr td checkbox should apply "selecttr" class relevant tr , number should shown in both scenarios.

3. clicking on thead th checkbox should select all checkboxes inside tbody respective class

your appreciated, please me!

html:

<label><input type="checkbox" id="col_1">hide column 1</input></label> <label><input type="checkbox" id="col_2">hide column 2</input></label> <label><input type="checkbox" id="col_3">hide column 3</input></label>  <div class="selected-counter">selected: <span>0</span></div> <div class="highlighted-counter">highlighted: <span>0</span></div>  <table width="100%" cellpadding="0" cellspacing="0" class="reddytable">     <thead>         <tr>             <th><input type="checkbox" name="cball" id="cball" /></th>             <th>column 1</th>             <th>column 2</th>             <th>column 3</th>         </tr>     </thead>      <tbody>         <tr>             <td><input type="checkbox" id="cb1" name="cb1" /></td>             <td>lorem ipsum</td>             <td>dolar sit</td>             <td>amet</td>         </tr>         <tr>             <td><input type="checkbox" id="cb2" name="cb2" /></td>             <td>pellentesque</td>             <td>semper arcu</td>             <td>eget molestie</td>         </tr>         <tr>             <td><input type="checkbox" id="cb3" name="cb3" /></td>             <td>ex rutrum et</td>             <td>vivamus</td>             <td>efficitur</td>         </tr>     </tbody>  </table>

css:

body{font-family:arial;}  label{margin-right:15px;} table.reddytable{border:1px solid #ccc;margin-top:20px;border-collapse:collapse;} table.reddytable th{text-align:left;border:1px solid #aaa;padding:5px;background:#ddd;} table.reddytable td{border:1px solid #ccc;padding:5px;} table.reddytable tr.highlighttr td{background:#ffe599;} table.reddytable tr.selecttr td{background:#6aa84f;}   .selected-counter,.highlighted-counter{margin-top:20px;font-weight:normal;font-size:12px;} .selected-counter span,.highlighted-counter span{font-weight:bold;font-size:16px;position:relative;bottom:-2px;} .selected-counter{color:#555;} .highlighted-counter{color:#2e4267;}

jsfiddle here

i can suggest jquery-bootgrid. have started use bootgrid myself seems promising html5 grid available @ moment.

see site several bootgrid related questions already. try edit or repost post jquery-bootgrid tag - believe author of bootgrid polling site assist questions. see author's site: http://www.jquery-bootgrid.com/

the examples , documentation on site wasn't extremely helpful me i'm real absolute beginner they're bit high level. if have little experience they'll great.

cheers


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

-
any ideas when firefox implement lengthadjust andtextlength?..... working svg application. lengthadjust , textlength working fine in chrome not working in fire fox . <svg viewbox = "0 0 500 300" version = "1.1"> <defs> <path id="s3" d="m 10,90 q 100,15 200,70" /> </defs> <g> <text font-size = "20"> <textpath xlink:href="#s3" textlength="205"> short text</textpath> </text> <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/> </g> </svg> this implemented in firefox text elements (not textpath or tspan) in case that's ok though can move attribute text element. <svg viewbox = "0 0 500 300" version = "1.1"> <defs> ...
Read more