I have a dynamic table which user can add rows or columns, I also use colResizable to make it flexible for user to be able to resize columns. While I added this plugin it does not work for new created cells.
This is my source
$(document).ready(function() {
$( "#container table" ).colResizable({ liveDrag : true });
//... Other stuffs
}
This function to create column
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> </td>');
}
index++;
});
});
$( "#container table" ).colResizable({ liveDrag : true });
}
If you want may think it's because of some CSS, this is the only CSS I have for #container
and tables inside
#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;
}
The weird part is that if I comment or remove the colResizable
it works for adding columns but if I enable it adds the columns but not visible and cannot be resized.
Any help will be appreciated.
Reference: 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 });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With