Bootstrap Editable - 如何将 DIV 定位在 table 之外

Question

我正在使用 editable 以允许用户更改 table 中的值。 editable 功能有效，我可以编辑 table.

中的内容

我的问题是 editable 函数在我的 table 中插入了一个 DIV。这会破坏 table 并导致内容被推到一边。

当您单击编辑 table 行时，table 看起来像这样。

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

当您单击内容时，我需要它在 table 以外的任何位置插入 DIV。为了防止内容被直接插入到 table，我应该在 javascript 中放入什么？

应该是这样的-

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

我的 javascript 目前是这样的 -

  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     });

如何告诉 Bootstrap Editable 不要将编辑的内容直接插入到我的 table 中，而是将其放在 table 的上方或下方为了保留 table 的结构？

已找到 Editable 文档 here

Answer 1

我通过像这样构建 table 解决了我的问题 -

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

如果您直接在 TD 中设置内容并使用 TD 作为跳转点，当它直接将 DIV 注入 table 时，您会遇到破坏 table 的问题.

使用 xedi 时，正确包装您的内容很重要table。

Answer 2

我一直在努力解决这个问题，并找到了可以帮助其他人的不同方法来解决它。你可以只添加容器选项

$('#username').editable({
    container: 'body',
    type: 'text',
    pk: 1,
    url: '/post',
    title: 'Enter username'
});

Bootstrap Editable - 如何将 DIV 定位在 table 之外

Bootstrap Editable - How to position DIV outside of table

jquery

twitter-bootstrap

x-editable