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(); });
Comments
Post a Comment