Question

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

我的问题是可编辑的功能是在我的表格中插入DIV。这会破坏表格并导致内容被推到一边。

当您单击以编辑表格行时，它会使表格看起来像这样。

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

当你点击内容时，我需要它将DIV插入表格的任何地方。为了防止内容直接插入到表中，我会在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不要将编辑内容直接插入到我的表中，而是将其放在表格的上方或下方以保留表格结构？

可编辑文档here

Answer 1

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

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

Answer 2

我通过构建我的表来解决我的问题 -

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

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

使用xeditable时，正确包装内容非常重要。

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

2 个答案: