I couldn't think of a more descriptive title, so I do hope it makes sense (feel free to correct me if I am wrong).
Basically I am adding tables to a site and the columns will automatically resize according to the amount of columns being added.
Adding a single works perfectly well, where it's getting a bit complicated for me (perhaps over the head) is as soon as I add an additional table on the same page - the script which runs counts all of the columns in their entirety.
For instance, if I add a three column table at the top of the page then and additional three column table at the bottom - the script then counts a total of 6 columns then divides 100 by that number..
Is there a simple way to create a variable or a table count so that the script at the bottom detects separate tables and resizes the columns per table?
Snippets of the code below:
<div class="table<?php echo $tblid; ?>">
<div class="cols">
</div>
..code going on here..
<div class="cols">
</div>
..Some more code going on here..
</div>
var v = jQuery('.table .cols').length;
var cw = (100/v);
jQuery('.table .cols').css('width',cw+'%');
If i am not wrong, youu have two tables with the same classname , so your selector jQuery('.table .cols')
gets both the table and jQuery('.table .cols').length;
will give you the length of the cols combining both the tables...
what you can do is. Give them seperate class and call each one..
HTML
<div class="table1">
<div class="cols">
</div>
..other code going on here..
</div>
<div class="table2">
<div class="cols">
</div>
..other code going on here..
</div>
Jquery
jQuery(function(){
jQuery('div[class^="table"]').each(function(){
var obj=jQuery(this).find('.cols');
var v = obj.length;
var cw = (100/v);
obj.css('width',cw+'%');
});
});
this should work for any number of tables..