Bootstrap Editable - How to position DIV outside of table

Question

I am using editable in order to allow the user to make changes to the values inside of a table. The editable function works and I am able to edit the content within my table.

My issue is that the editable function is inserting a DIV inside of my table. This breaks the table and causes content to be pushed to the side.

When you click to edit a table row it makes the table look like this.

<table>
   <thead>
     <th>Log</th>
     <th>another head</th>
   <tbody>
     <tr>content</tr>
     <div>editpopover</div>
     <tr>more content</tr>
   </tbody>
</table>

When you click on the content, I need it to insert the DIV anywhere BUT the table. What would I put inside my javascript in order to keep the content from being insert directly into the table?

It should look like this -

<div>editpopover</div>
<table>
   <thead>
     <th>Log</th>
     <th>another head</th>
   <tbody>
     <tr>content</tr>
     <tr>more content</tr>
   </tbody>
</table>

My javascript currently looks like this -

  4     $('#visitor-log-row td').editable({
  5         params: function(params) {
  6             params.name = $(this).attr('name'),
  7             params.action = 'editable_visitor_log';
  8             params.security = $('#visitor_log_nonce_field').val();
  9             return params;
 10         },
 11         highlight: null,
 12         url: ajaxurl,
 13         success: function(response) {
 14             if( !response.success )
 15             {
 16                 if( !response.data ) {
 17                         // failed nonce
 18                     return 'The log was not updated. Reload the page and try again.';
 19                 } else {
 20                     // wp_send_json_error
 21                     return response.data.error
 22                 }
 23             }
 24         }
 25     });

How can I tell Bootstrap Editable not to insert the content of the edit directly into my table but instead to place it above or below the table in order to preserve the tables structure?

Docs for Editable are found here

Answer 1

I solved my issue by building my table like so -

<table>
   <tr>
     <td>
       <a href="#" id="thing">CONTENTSHERE</a>
     </td>
   </tr>
</table>

If you set the content directly inside of a TD and use the TD as your jump off point, you will have issues with it breaking your table when it injects DIVs directly into the table.

Properly wrapping your content is important when working with xeditable.