Question

我有一个动态表，用户可以添加行或列，我还使用 colResizable 使用户可以灵活调整列的大小。虽然我添加了这个插件，但它不适用于新创建的单元格这是我的来源

$(document).ready(function() {
   $( "#container table" ).colResizable({ liveDrag : true });
   //... Other stuffs
}

此功能用于创建列

function insert_column(element, position)
{
   element.parent().parent().find('tr').each(function() {
      var index = 0;
      $(this).find('td').each(function() {
         if (index == position)
         {
             $(this).after('<td>&nbsp;</td>');
         }
         index++;
      });
   });
   $( "#container table" ).colResizable({ liveDrag : true });
}

如果你想要的可能是因为有些CSS，这是我#container和

中唯一的CSS

#container {
    float: left;
    width:800px;
    height:100%;
    overflow:hidden;
    padding: 7px;
    border: 2px #BBB dashed;
}
#container table {
    width: 100%;
    table-layout: fixed;
    background-color:#FCFCFC;
}
#container td {
    border-spacing: 2px;
    min-height: 17px;
    min-width: 50px;
    border: 1px #CCC dotted;
}

奇怪的是，如果我评论或删除colResizable它可用于添加列，但如果我启用它会添加列但不可见但无法调整大小。
任何帮助将不胜感激。

Answer 1

参考： https://github.com/alvaro-prieto/colResizable/issues/2#issuecomment-5198584

//Disable the plugin first    
$( "#container table" ).colResizable({ disable : true });

insert_column();

//Re-init the plugin on the new elements
$( "#container table" ).colResizable({ liveDrag : true });

Answer 2

Jon的回答是有效的。我一直在苦苦挣扎，因为列调整大小都没有工作，也没有在列之间显示Resizer图标。

通过在修改HTML表之前禁用colResizable（）并进一步调用colResizable（）工作。

此添加后的工作代码如下。

这个'tblqresult'是表格ID。在此代码中，以下是步骤序列：

首先禁用colResizable（）。
Tbody中的数据已清除。
清除所有现有标头列。
动态添加新列。
调用函数setResultTableColresizable（），再次设置colResibale（）。

make clean

动态表上的colResizable不起作用

2 个答案: