Dynamic width of Table as per column - javascript

I have one table which display data as from Dynamic Content, I want to make table width 100% when there is 6 cols. and table width auto if less the 5 cols.
I tried with CSS but, when there is only two cols, it expand two cols to full width while have table 100% width and looks awkward.
Is there any Javascript, jQuery script available to get this result?

Using jQuery and ensuring you choose the first row in the table body in case the thead has a different layout.
function setTableWidth(tableId) {
var $tbl = $('#'+tableId);
var newWidth = $tbl.find('tbody>tr:eq(0)>td').length > 5 ? '100%' : 'auto';
$tbl.width(newWidth)
}

Depending on how you're loading the dynamic content, there might be an easier way, but this function should do what you need:
function setTableWidth(tableId) {
myTable = document.getElementById('tableId');
if (myTable.getElementsByTagName('tr')[0].getElementsByTagName('td').length > 5)
myTable.style.width = '100%';
else
myTable.style.width = 'auto';
}
Note though, that it won't work if any of the cells in the first row have a colspan. It's simply counting the number of columns in the first row and setting the width based on that.

Related

Removing an empty "Row" for a Grid of Nested Divs (not an html table) with JS / jQuery

I made this function to remove rows being looped into in a spec table view when all the cells in that row contain "N/A" instead of a spec. For reasons not worth going into, I need to change my table view from an HTML table to a fake table (html grid) with nested divs. This means that the specs are no longer connected by the tr tag, so I'm not sure how I can connect them to accomplish the same result...
$('.specnacheckrow').each(function() { // for each row in the table
var naTrue = 0;
var totalCells = 0;
var $this = $(this);
totalCells = $this.find('.specnacheckcell').length //count how many cells
naTrue = $this.find('.specnatrue').length //count how many <span class="specnatrue">N/A</span>
if (naTrue < totalCells) { //if the number of cells is greater than the number of N/A's
$this.show(); //show the row
} else {
$this.remove(); //else, hide the entire row - this includes the spec label at the beginning of the row.
}
});
Example of original table - https://codepen.io/genopeppino/pen/PojMero
Example of Grid Divs - https://codepen.io/genopeppino/pen/oNwKyNJ
You can see that in the original table the "Ship Weight - KG" row is correctly removed by the function above.

Aligning columns from different tables

Let's say I have two tables with some text in between:
<table>
<tr><td>A</td><td>0000</td><td>Some text goes here...</td></tr>
<tr><td>B</td><td>11</td><td>... and here</td></tr>
</table>
Some text goes here.
<table>
<tr><td>CCC</td><td>1</td><td>Some text goes here...</td></tr>
<tr><td>DDD</td><td>0</td><td>... and here</td></tr>
</table>
Is is possible to make these two tables having the same column width?
That is I want the first column of table 1 to be 3 characters (e.g. CCC) big ; and I want the second column of table 2 to be 4 characters (e.g. 0000) big.
Please note that I don't know what the width of each column should be, therefor I don't want to define it beforehand in a CSS file.
I'm more interested in a dynamic approach using Javascript.
The different steps would be something like :
Build the two tables;
Get the maximum width of columns 1 and 2;
Update the CSS properties of my tables using these values.
(put ids on your table)
You can use jQuery selectors to get all your width values of your tds like :
var maxWidth = 0;
$("#table1 td").each(function() {
var width = $(this).css("width");
if(width > maxWidth) maxWidth = width;
});
And then
$("#table1 td").css("width", width);
Using JQuery you could do the following:
$(document).ready(function() {
var tdWidth = 0;
$('td').each(function() {
width = $(this).width();
if(width > tdWidth) tdWidth = width;
});
$('td').css("width", tdWidth);
});

Dynamic Table Width

I have a table cell in which other tables are displayed (with background colors). The inner tables aren't always shown; they can be hidden via a button (change class with jQuery). Now I want the outer cell to always be filled with color. That means if only one table is displayed, its width should be 100%. When two are displayed, each width should be 50%, and so on.
How am I supposed to solve this?
Here's an example:
...
<td>
<table class="show"><tr><td></td></tr></table>
<table class=""><tr><td></td></tr></table>
<table class="show"><tr><td></td></tr></table>
</td>
...
In this case, the width should be 50%
You can change the width value with Jquery.
var count_table = $(".show").length; // count ".show" elements
$(".show").each(function{ // iteration on each ".show"
var width = 100/count_table; // % value of new width
$(this).css("width", width+"%"); // CSS modification
});
This code is just adapted for one TD element. You need to iterate on each "td" too.
(I hope I answered your problem)
To change the width of your elements you can use jquery.
Here's the page explaining how.
Here is another way: http://jsfiddle.net/ypJDz/1
A bit too complicated for what you need, but a great deal of possibility to expand.
function resizeTables() {
var baby = $("td > table.show"),
amount = baby.length,
mother = $("body");
baby.width(function () {
var w = mother.width() / amount;
return w;
});
}
resizeTables();
$("button").click(function () {
var $this = $(this),
ID = $this.index() + 1;
$("td > table:nth-child(" + ID + ")").toggleClass("show");
resizeTables();
});

Lock table cell width, without specifying it

I'm trying to dynamically create a table from js, although I do know the exact width and height of the table, I do not know the actual width of table cell. I know that it is possible to find the width of the each cell, but I was wondering if you can actually lock it without specifying the width of the cell.
Link to jsfiddle:
http://jsfiddle.net/j3TEz/21/
My js file:
window.addEventListener('load',init,false);
function init(){
var table = document.getElementById('myTable');
var tr = 3;
var td=5;
var innerTable = '';
for(var trCounter=0;trCounter<tr;trCounter++){
innerTable+='<tr>';
for(var tdCounter=0;tdCounter<td;tdCounter++){
var id=(trCounter*td)+tdCounter;
innerTable+='<td id="'+id+'" onclick="addText('+id+')"></td>';
}
innerTable+='</tr>';
}
table.style.width="600px";
table.style.height="300px";
table.style.border="1px solid black";
table.innerHTML=innerTable;
}
function addText(id){
document.getElementById(id).innerHTML="Lorem Ipsum";
}
Css table-layout set to fixed will keep the columns width fixed, the size will be determined by the first row columns.
Hope this help.

Google Chart - setSelection does not scroll to selected row in Table visualisation

I am using Google Chart Tools to display a Table visulisation on my webpage along side a Google Map. When the user clicks a map location, the callback automatically selects the corresponding location from a list of locations in the table.
This works fine, but the table does not automatically scroll the table so the selected row is visible (there are a lot of points so only a limited amount are shown with a scrollbar on the right hand side of the Table vis.)
I can't see any way of setting the current 'position' of the viewport to the Table. Is there a way to do this?
Thanks!
Code snippet below:
arrBuoyLocs = new google.visualization.DataTable();
vTable = new google.visualization.Table(document.getElementById('table_div'));
// do initialisation, etc...
.
.
.
function updateSelectedTableItem(buoyid) {
console.log('Searching for %s', buoyid);
idx = -1;
nRows = arrBuoyLocs.getNumberOfRows();
for(iRow = 0; iRow < nRows; iRow++) {
if(arrBuoyLocs.getValue(iRow, 0) == buoyid) {
console.log('Got match for %s at idx %d', buoyid, iRow);
idx = iRow;
break;
}
}
if(idx >= 0) {
vTable.setSelection([{row: idx, column: null}]);
// This highlights the row but does not show it if the row is
// scrolled off the screen. How do I scroll the Table to show
// the selected row?
}
}
I have no idea how to do it with google chart api, but heres a thought that might help:
if you can find the screen height, the table row height and calculate how many table rows can fit into your screen, then you can calculate how much the scrollbar needs to scroll to show your selected table row.
so if you have a screen height that can have 20 rows shown, and you selected row 25, then you scroll the scrollbar 5 * rowHeight + margin. this can probably be done in javascript or in an ajax file.
Basically you already have all the data you need to do it, just need to findout how to scroll the scrollbar programatically in javascript.
I found this, which works.
https://groups.google.com/forum/#!searchin/google-visualization-api/table$20setSelection/google-visualization-api/8_atzTNPmL4/etL7VZWjdVQJ
Edit:
From which, this will scroll to the selected column of table in 'table_div'.
I found this sufficient, with some fine tuning to ensure the row I want is clearly in view.
function on_row_select() {
// get the container div for the overflowed table
var container = $('#table_div').find('.google-visualization-table-table:eq(0)').parent();
// get the container div for the fixed header
var header = $('#table_div').find('.google-visualization-table-table:eq(1)').parent();
// get the selected row
var row = $('.google-visualization-table-tr-sel');
// set the scroll position of the overflowed div based on the offset position of the row and the height of the fixed header
$(container).prop('scrollTop', $(row).prop('offsetTop') - $(header).height());
}
Something like this one. This answer a) no need jQuery and b) do not touch scroller when the selected row already on screen.
scrollOnToSelectPosition=function(element) {
var tableElement=element.querySelectorAll("table.google-visualization-table-table")[0],
selection=tableElement.querySelectorAll("tr.google-visualization-table-tr-sel");
if (selection.length) {
var parentDiv=tableElement.parentElement,
tableHead=tableElement.querySelectorAll("thead")[0],
offset=selection[0].offsetTop-tableHead.clientHeight,
viewHeight=parentDiv.clientHeight-tableHead.clientHeight;
if (offset>parentDiv.scrollTop && offset<parentDiv.scrollTop+viewHeight) {
if (offset+selection[0].clientHeight>parentDiv.scrollTop+viewHeight) {
parentDiv.scrollTop=offset+selection[0].clientHeight-viewHeight;
}
}
else {
parentDiv.scrollTop=offset;
}
}
},

Categories