javascript - hide/show button in datatables row details -


well, problem have custom datatables 40 rows (for now) , each row has details of , added "edit option" in each row details content. code based in this: https://datatables.net/release-datatables/examples/api/row_details.html modified formatdetails this:

function fnformatdetails ( otable, ntr )     {            var adata = otable.fngetdata( ntr );         var sout = '<input type=\'button\' id=\'hideshow\' value=\'hide/show\'><table id="tablaeditar" class="tablaeditar">';         sout += '<tr><td><input id="nombref" placeholder="nombre de fantasia" type="textbox" value="'+adata[1]+'" maxlength="40" onkeypress="return permite(event, \'car\')" /></td>' +                  '<td><input id="titular" placeholder="titular" type="textbox" value="'+adata[2]+'" maxlength="40" onkeypress="return permite(event, \'car\');" /></td>' +                 '<td><input id="direccion" placeholder="direccion" type="textbox" value="'+adata[3]+'" maxlength="50" onkeypress="return permite(event, \'num_car\')"/></td></tr>' +                 '<tr><td><input id="telefono" placeholder="telefono" type="textbox" value="'+adata[4]+'" maxlength="30" onkeypress="return permite(event, \'num\');" /></td>' +                 '<td><input id="email" placeholder="email" type="textbox" value="'+adata[5]+'" maxlength="40" /></td>' +                 '<td><input id="paginaweb" type="textbox" placeholder="pagina web" value="'+adata[6]+'" maxlength="40" /></td></tr>' +                 '<tr><td><input id="comentarios" type="textbox" placeholder="comentarios" value="'+adata[7]+'"  maxlength="40"></td>' +                 '<td><input id="metros" type="textbox" placeholder="superficie" value="'+adata[8]+'" maxlength="5" onkeypress="return permite(event, \'num\');" /></td>' +                 '<td align="center"><div class="aceptar"><input type="button" value="aceptar"></input></div></td></tr>'         sout += '</table>';          return sout;     } 

as can see put whole rows information in inputs, , long code show in each row details, want put button can show , hide sout table class "edittable". simple this: http://jsfiddle.net/vvsan/1/

i tried following code:

$(document).ready(function() {       $('#hideshow').on('click', function(){     $(this).closest('table.tablaeditar').toggle();     }); }); 

but doesn't work

how can it?

thanks in advance!

this issue of event delegation , have delegate event static existing parent element or document available time below:

change script this:

$(document).on('click', '#hideshow', function(){     $(this).next('table.tablaeditar').toggle(); }); 

demo fiddle


your updated fiddle no 724


note:

.on() requires jquery version 1.7+


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -