Using jquery + jeditable + bootstrap to add editable new row on a table -

i have test may way trick nothing solution. need jeditable + datatable other display. that's why jeditable mandatory.

i'm trying use jquery + jeditable on table (id,type,phone,default) :

1. add row/remove row (remove if val 2 & 3 empty)
2. edit field 1 & 2 of new row added

html :

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>  <h4>tél <button id="add-phone" class="btn btn-mini btn-primary" type="button"> + </button></h4> <table border="1" width="80%">     <tr>         <th>id</th>         <th>type</th>         <th>tel</th>         <th></th>     </tr>     <tr>         <td>1</td>         <td class="dblclick">mob</td>         <td class="dblclick">0000000</td>         <td><input type="radio" name="1-tel-default" id="1-tel-default-1" value="1" /></td>     </tr>     <tr>         <td>2</td>         <td class="dblclick">mob</td>         <td class="dblclick">0000000</td>         <td><input type="radio" name="1-tel-default" id="1-tel-default-2" value="1" /></td>     </tr>         <tr>         <td>3</td>         <td class="dblclick">mob</td>         <td class="dblclick">0000000</td>         <td><input type="radio" name="1-tel-default" id="1-tel-default-3" value="1" /></td>     </tr> </table> 

javascript :

$(document).ready(function(){       $(".dblclick").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", {          indicator : "loading...",         submit: 'ok',         cancel: 'cancel',         tooltip   : "double-click edit...",         event     : "dblclick",         style  : "inherit"     });      // trigger event when button clicked     $("#add-phone").click(function()     {         //alert("click");          // add new row table using addtablerow function         var clone = $("#phonelist tbody tr:last")         .clone()         .find('td')         .text('edit')         .end()         .insertafter("#phonelist tbody tr:last");          /*$('#phonelist tbody tr:last').after('<tr id="last" ><td class="dblclick">editer</td><td class="dblclick">editer</td><td><input type="radio" name="default" id="default-last" value="0"></td></tr>');*/          // prevent button redirecting new page         return false;     });  }); 

this test jeditable on jsfiddle : http://jsfiddle.net/supersonique/nchq5/

thanks help.

for deleting row if values 2 & 3 blank, try using callback. in function, value return value of post "http://www.appelsiini.net/projects/jeditable/php/echo.php". make return "delete" if want row deleted. have deletion in database/data storage.

$(".dblclick").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", {      indicator : "loading...",     submit: 'ok',     cancel: 'cancel',     tooltip   : "double-click edit...",     event     : "dblclick",     style  : "inherit",     callback: function(value, setting) {       if(value == "delete") $(this).parent().hide();     } }); 

you may have play around number of .parent() functions used, depending on how nested clicked element vs row element.

also if adding new row want use jeditable, instead of binding jeditable @ document ready, bind on document click, every time click newly added rows have editable behavoir bound them.

$(document).on('click', function() {   // jeditable stuff here });