title: Using jquery + jeditable + bootstrap to add editable new row on a table
body: <p>I have test may way to do the trick but nothing is really a good solution. I need jeditable + datatable for other display. That's why jeditable is mandatory.</p>
  
  <p>I'm trying to use jquery + jeditable on a table (id,type,phone,default) to do :</p>
  
  <ol>
  <li>Add row/remove row (remove if val 2 &amp; 3 are empty)</li>
  <li>Edit field 1 &amp; 2 of the new row added </li>
  </ol>
  
  <p>HTML :</p>
  
  <pre><code>&lt;link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"&gt;
  &lt;script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"&gt;&lt;/script&gt;
  
  &lt;h4&gt;Tél &lt;button id="add-phone" class="btn btn-mini btn-primary" type="button"&gt; + &lt;/button&gt;&lt;/h4&gt;
  &lt;table border="1" width="80%"&gt;
      &lt;tr&gt;
          &lt;th&gt;id&lt;/th&gt;
          &lt;th&gt;Type&lt;/th&gt;
          &lt;th&gt;Tel&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td class="dblclick"&gt;mob&lt;/td&gt;
          &lt;td class="dblclick"&gt;0000000&lt;/td&gt;
          &lt;td&gt;&lt;input type="radio" name="1-tel-default" id="1-tel-default-1" value="1" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td class="dblclick"&gt;mob&lt;/td&gt;
          &lt;td class="dblclick"&gt;0000000&lt;/td&gt;
          &lt;td&gt;&lt;input type="radio" name="1-tel-default" id="1-tel-default-2" value="1" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td class="dblclick"&gt;mob&lt;/td&gt;
          &lt;td class="dblclick"&gt;0000000&lt;/td&gt;
          &lt;td&gt;&lt;input type="radio" name="1-tel-default" id="1-tel-default-3" value="1" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Javascript :</p>
  
  <pre><code>$(document).ready(function(){ 
  
      $(".dblclick").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", { 
          indicator : "Loading...",
          submit: 'Ok',
          cancel: 'Cancel',
          tooltip   : "Double-click for edit...",
          event     : "dblclick",
          style  : "inherit"
      });
  
      // trigger event when button is clicked
      $("#add-phone").click(function()
      {
          //alert("click");
  
          // add new row to 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('&lt;tr id="last" &gt;&lt;td class="dblclick"&gt;Editer&lt;/td&gt;&lt;td class="dblclick"&gt;Editer&lt;/td&gt;&lt;td&gt;&lt;input type="radio" name="default" id="default-last" value="0"&gt;&lt;/td&gt;&lt;/tr&gt;');*/
  
          // prevent button redirecting to new page
          return false;
      });
  
  });
  </code></pre>
  
  <p>This is my test jeditable on jsfiddle : <a href="http://jsfiddle.net/supersonique/ncHQ5/" rel="nofollow">http://jsfiddle.net/supersonique/ncHQ5/</a></p>
  
  <p>Thanks for your help.</p>