How to set HTML table cell width using JavaScript and jQuery - javascript

I have a HTML table like the below;
<table style="width: 100%">
<tr>
<td style="width: 30px">cell</td>
<td class="cell">cell</td>
<td class="cell">cellcell</td>
<td class="cell">cellcellcell</td>
<td class="cell">cellcellcellcell</td>
<td class="cell">cellcellcellcellcell</td>
<td class="cell">cellcellcellcellcellcell</td>
<td style="width: 30px">cell</td>
</tr>
</table>
The table is designed to stretch to screen (or a div having specific width). I want equal width for all cells having class="cell" and this works well when the character length of text in all cells having class="cell" are equal. But, I want to fix the cell width even if the character lengths of contents in class="cell" are different.
Also you can see that the first and last cells have fixed width, in pixels and others cell widths are to be calculated on the basis of percentage .. I want equal width for all cells (except first and last with fixed width in pixels).
I think this can be done using Javascript with the help of jQuery, by calculating the table cell widths on document ready, and then adding some function using on window resize and thereby calculating cell widths. The cell widths will be (tablewidth in px - 60px)/6 I am a beginner and I don't know much.. How can I do this using jQuery and (or) Javascript.
It will be very helpful if someone make me a fiddle..

You could just do that with CSS, by applying each td an equal percentage:
td{
width: 16%;
}
example: http://jsfiddle.net/niklasvh/wKmxD/
With your updated question, you could do it with javascript by first storing the widths into an array, and then referencing that on window resize, and use the aspect ratio difference to place new widths:
var w = [];
var tw = $('table').width();
$('table td').width(function(i,e){
w[i]=e;
});
$(window).resize(function(){
$('table td').width(function(i){
return ($('table').width()/tw)*w[i];
});
});
http://jsfiddle.net/niklasvh/543D9/

Related

resizing multiple highcharts in a table

I have the following html table setup
<div>
<table>
<tr>
<td class='plot1'>Some data 1</td>
<td class='plot2'>Some data 2</td>
</tr>
<tr>
<td class='plot3'>Some data 3</td>
<td class='plot4'>Some data 4</td>
</tr>
</table>
</div>
with the following CSS
.plot1,.plot2,.plot3,.plot4{
width: 50%;
height: 50%;
border: 1px solid red;
}
On a double click in any of the 4 table cells (these will contain chart objects) I would like to expand that cell to fill up the parent div and hiding the other 3 cells. On a subsequent double click I would like the table to have its original setup.
Here is the jQuery for just a double click on plot 1.
$('td.plot1').dblclick(function(e) {
if (e.ctrlKey) {
if ($(this).closest('table').children('tbody').children('tr').children('td.plot2,td.plot3,td.plot4').is(":visible")) {
$(this).closest('table').children('tbody').children('tr').children('td.plot1').height('100%');
} else {
$(this).closest('table').children('tbody').children('tr').children('td.plot1').height('50%');
}
$(this).closest('table')
.children('tbody')
.children('tr')
.children('td.plot2,td.plot3,td.plot4')
.toggle();
}
});
A working example of the above can be found here.
I am having trouble with a couple of things. I'd obviously like to be able to have one jQuery for a double click on any table cell instead of 1 for each cell. This behavior works fine until I introduce a highcharts object into each table cell then the height of the clicked plot does not change when trying to "minimize" back to its original size.
Any help,or different approaches would be appreciated as I seem to be stuck on this silly issue!
High charts api has something like redraw, this will help you to redraw charts when the container size changes. There is an excellent demo which help you to achieve it, Chart resize fiddle.
You can also go through the official documentation Here

Sticky td-column without external div

This is again one of these old issues: I would like to make the four first columns of my HTML-Table sticky (only horizontally).
There are several solutions out there which work properly if it's a smaller table. Unfortunately mine has a big size and I would like it to spread it over the whole screen. Therefore most solutions which pack the table in a scrollable div are no use because they put the scrollbar at the very end of the div - which is quite a distance to go down.
Also there is some small content over the table so it's yet not 100% of the screen...
There were some ideas around the Internet to give the frozen tds the position: absolute; attribute which didn't work for me.
http://www.fixedheadertable.com/ seems kinda fine - unfortunately till now it just messes up my table...
EDIT 1:
It's a pretty huge table which displays a database and does some calculation with its values.
That's one of my problems: It always has the same amount of columns (about 50) but the number of rows vary.
But in general the table is kinda straight-forward with no surprises:
<table id="calctbl">
<thead class="fixed">
<tr id="table-head">
<th class="several classes">Number<br>
<br>Pos. Nr.</th>
<th class="several classes">Info 1</th>
<th class="several classes"><div>More infos</div></th>
<th class="several classes">Here<br>are some more<br>infos</th>
<th>... and it goes on ...</th>
</tr>
</thead><tbody>
<tr>
<td class="several other classes">vals...</td>
<td class="several other classes">more vals</td>
<td class="several classes"><div>and some more</div></td>
<td class="several other classes">...</td>
<td>... and it goes on ...</td>
</tr>
<tr>
<!-- No big surprises, it just goes on -->
</tr>
</tbody>
</table>
Also I use this for the first header line: HTML table with fixed headers?
EDIT 2:
http://www.fixedheadertable.com/ - there is not really an explanation and for some reason it just messes everything up
http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
Has the mentioned problem: It requires a limiting div around it
how do I create an HTML table with fixed/frozen left column and scrollable body?
Answer #1: Same problem with the div
position: fixed - doesn't work at all for me
How can I make the first and second column of a table sticky Answer #1 - dosen't work either
http://massless.org/_tests/grid1/ - seems to be quite old and requires a div
http://learndevelopingmyway.blogspot.co.at/2012/03/sticky-columnsheaders-freeze-pane-in.html is this even a table?
According to my experience, fixedheadertable works just fine. Try to play with your css, especially container div's max-height and other height-related properties to limit it's size for big tables. It would be easier if you could show your table, but if I understood correctly, this css could help:
.fht-tbody{
max-height: 300px;
}
You can test this easily if using some inspector in your browser (i.e. firebug) on the original page (http://www.fixedheadertable.com/) by targeting the .fht-tbody and setting the above value.

How to adjust number rows in HTML table based on window size and swap data at timed intervals?

I have a set of tuples that I would like to display in a table. If there are more tuples than would fit in the window, I would like to cut the table short and only display that many tuples (rows), and then swap the data out at periodic intervals (allowing the data to be shown on a projector screen for example).
I can monkey around with Javascript enough to do this if I knew where to start, but I don't have much experience programming in the browser. i.e. I'm not even sure where to start looking.
Use the tabe width and row width as percentage like,
<table width='100%'>
<tr>
<td width='10%'></td>
..................
<tr>
</table>

Resize margin-top/bottom proportional to screen height

I have multiple rows of elements that i want to align vertical so that on different resolutions, the first screen (without scrolling) would be the same for each of them.
Luckly, i have some limits that i have to respect 800px and 1200px (vertical resolution). So only between those two values my margins have to increase/decrease proportionaly. If bigger or smaller than that interval the screen remains as it is to one of those limits.
Unfortunely, based on requirements i can't use media-queries or javascript for calculating this, so it has to be a pure CSS solution.
Is there a way of doing that? Without affecting height, width or left/right margins of the elements.
Or is there a javascript way of modifying that without injecting inline CSS property? I haven't heard of that but could it be possible to modify CSS files?
EDIT A non-table solution would be prefered.
No javascript ? The only markup i see able to achieve this (divide a page vertically + evenly) is a <table>
I fiddled an example here
You will have to trigger height of 100% on body and html first,
html, body {
height:100%
}
<table style="width:100%;height:100%">
<tr>
<td style="color:green;background-color:pink">a a</td>
</tr>
<tr>
<td style="color:blue;background-color:aqua">b b</td>
</tr>
<tr>
<td style="color:red;background-color:cyan">r r</td>
</tr>
</table>
Play with this, test it out to see if this solution suits your situation.
Otherwise, if you intent to use javascript, you can check out 'not fully supported' calc() in css3

Investgate the effect of insertAfter in jQuery

To understand the effect of .insertAfter, I designed a small table test that has 2 rows and 2 columns.
<table id="myTable" width="560" border="1" cellspacing="2" cellpadding="2">
<tr>
<td title="row 1*1" class="styletest">1*1</td>
<td title="row 1*2" class="styletest">1*2</td>
</tr>
<tr>
<td title="row 2*1" class="styletest">2*1</td>
<td title="row 2*2" class="styletest">2*2</td>
</tr>
</table>
The jquery code is:
var $tooltip = $('<div id="tooltip"></div>');
$tooltip.insertAfter('#myTable').hide();//I want to know the code after inserting this element.
function showTooltip(cell) {
$tooltip.show().text(cell.attr("title"));
}
$('.styletest').hover(function() {
showTooltip($(this));
}, function() {
$tooltip.hide();
});
The test includes hovering different cells and display tooltips.
The demo is at jsfiddle.
I want to know the source code when I hover different cells.
For example, when I hover row 1, column 1, the snapshot likes:
When I hover row 2, column 2, the snapshot likes:
Questions:
When mouse hovers row 1 column1 and row 2 column 2;
Do they have the same rendered source code?(Using F12 can't get the rendered code when hovering)
Why the tooltips are displayed in the same position that seems in the middle?
It's the same element, you are just changing it's content and visibilty. It's not going to move, and other than the content you are setting with text() the markup is not going to change either.
You don't need to inspect anything, the source code is right there in your script, and what you insert is what you get, so to speak!
You can inspect styles on elements that only apply on hover in firebug:
Inspect the element that has a hover style, click on the DOM node so it's selected and highlighted in blue. Then go to the style tab on the right and click the little arrow, and choose :hover now Firefox will hold the hover styles and you can insect the div at the bottom.
In your case, either you have CSS for #tooltip or styles for divs to have text centered.

Categories