Dynamically set table cells children div heights to 100% its row height - javascript

I am trying to "dynamically" update the height of each divto be equal to its row parent
I have this very simple code that does the job good but throughout all rows. So what I am finallygetting is setting all td divs with the greatest value within the whole table, which I don't want.
What I want is, to set all divs with the greatest height within the same row
Any suggestions?
function setdivHeights() {
var maxHeight = -1;
$('tbody tr td div:last-child').each(function() {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$('tbody td div:last-child').height(maxHeight);
$('tbody td div:last-child').addClass('cell');
}
and this is a simplified sample of my html code:
<table class="tablesorter" id="list">
<thead></thead>
<tbody>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
<td><div>4</div></td>
</tr>
<tr>
<td><div>a</div></td>
<td><div>b</div></td>
<td><div>c</div></td>
<td><div>d</div></td>
</tr>
</tbody>
</table>

Just do it per row instead of for all rows in your selector:
function setdivHeights() {
trs = $('tbody tr');
trs.each(function(){
var maxHeight = -1;
$(this).find('td div:last-child').each(function() {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
}).height(maxHeight).addClass('cell')
})
}

Hi I have no idea if I understood you, but if you have a height and width on the td's, you can simply give to the dive with css a height and width of 100% and it should fill it. The red border is the dimension of the td's and the blue box is the filled div... I think there is no JS needed for such a solution, because, when you give the css 100% of height, it takes the value of it's parent element, in this example the div would take the 20px of his parent, the td, and fill it. If I did'nt understood you're question, than sorry :)
.tablesorter tbody tr td {
height: 20px;
width: 70px;
border: 2px solid red;
}
.tablesorter tbody tr td div {
height: 100%;
width: 100%;
background-color: blue;
}
<table class="tablesorter" id="list">
<thead></thead>
<tbody>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
<td><div>4</div></td>
</tr>
<tr>
<td><div>a</div></td>
<td><div>b</div></td>
<td><div>c</div></td>
<td><div>d</div></td>
</tr>
</tbody>
</table>

try to use border-collapse: collapse and border-spacing: 0
table {
width: 200px;
border-collapse: collapse;
border-spacing: 0;
}
tr td {
padding: 0;
width: 70px;
height: 50px;
}
tr td div {
width: 100%;
height: 100%;
background-color: green;
}

Related

th's width in thead doesn't match td width of tbody

I want to empty the content of my table td, to make a loading and then show latest fetched data, but the problem is the thead seem have some flickering issue, as the width of thead is affected when tbody data is gone.
table {
border-collapse: collapse;
}
table th,
table td {
padding: 5px;
border: 1px solid;
}
demo:
https://jsfiddle.net/nLrpbz9r/1/
This is normal... display: none elements are not involved in table width calculation. You can use visibility: collapse instead:
$(function() {
$('button').click(function() {
const $tb = $("tbody");
const new_visibility = $tb.css("visibility") === "visible" ? "collapse" : "visible";
$("tbody").css({
"visibility": new_visibility
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Toggle tbody</button>
<table border="1">
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>john wesley</td>
<td>18</td>
</tr>
</tbody>
</table>
Unfortunately... when you insert new data in tbody, the widths will change depending on content. There is no good solution except using a fixed layout table.
add something like table th {min-width: 100px;} to your CSS.
$(function() {
$('button').click(function() {
const tb = $('tbody').clone()
if ($(tb).length > 0) {
$('tbody').hide()
}
})
})
table {
border-collapse: collapse;
}
table th,
table td {
padding: 5px;
border: 1px solid;
}
table th {min-width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>john wesley</td>
<td>18</td>
</tr>
</tbody>
</table>
<button>Hide tbody</button>
I guess this two attribute which I set, we'll solve your problem:
table th,
table td {
padding: 5px;
border: 1px solid;
width: 200px;
text-align: center;
}
The last two lines fix the width of each td width the value you want ( Instead of 200 px and it's better to set it by percent value to support the responsibility) and the last line just put the text in center position. If you press the button, the Header cells will not change.

animate the table rows to slide out or fade in?

I stumbled upon this plugin
https://jquery-datatables-row-grouping.googlecode.com/svn/trunk/customization.html
the problem is, everything is in <tr>s and I fear you cannot animate them?
Is there really no way? CSS or javascript wise.
e.g. I want to animate a tables tr elements.
Maybe one solution could be like that :
var animate = function(evt) {
//we go to the 'tr' tag
$el = $(evt.currentTarget).parent().parent();
//we hide the 'td's tag
$el.find('td').hide(333 , function(){
// we reduce the height of 'tr' tag
$el.animate({height : 0} , 777)
});
}
$('button').click(animate);
table {
border: solid 1px #AAA;
padding: 3px;
border-collapse: separate;
}
td {
height: 50px;
margin : 3px;
min-width : 50px;
border: solid 1px orange;
}
tr {
height : 55px;
padding : 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>a</td><td>b</td><td><button>hide</button></td>
</tr>
<tr>
<td>a</td><td>b</td><td><button>hide</button></td>
</tr>
<tr>
<td>a</td><td>b</td><td><button>hide</button></td>
</tr>
</table>

Styling tables using CSS

I have a problem with styling tables using CSS.
So I have a table in my HTML file:
<table class="altrowstable" id="alternatecolor">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>
Here is my JavaScript file:
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
And here is my CSS file:
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.oddrowcolor{
background-color:#d4e3e5;
}
table.evenrowcolor{
background-color:#c3dde0;
}
The problem is that it is not changing color neither odd rows nor even odd.
What am I doing wrong?
Thanks.
I'll provide you a CSS solution for this:
table.class_name tr:nth-child(odd) {
/* Styles */
}
table.class_name tr:nth-child(even) {
/* Styles */
}
That's all you need, although it’s not supported in IE 8 and earlier.
Demo
For your table headers, you can simply use a different selector to over ride the background styles like
table.altrowstable tr th {
background: #fff;
}
Demo 2
I did check your code and found a little correction iin the css is needed to get the expected solution. There should be an empty space between the table and row classname.
table .oddrowcolor{
background-color:#d4e3e5;
}
table .evenrowcolor{
background-color:#c3dde0;
}
I like to provide solutions that dont tinker or modify the original source much.
Your HTML is fine, JScript is fine(very fine). Good to see that you use the .classname so that is is cross brwoser compatible.So all i did is change the classes for the CSS
YOUR CODE
table.oddrowcolor {
background-color:#d4e3e5;
}
table.evenrowcolor {
background-color:#c3dde0;
}
MY CHANGE
tr.oddrowcolor {
background-color:#d4e3e5;
}
tr.evenrowcolor {
background-color:#c3dde0;
}
WORKING FIDDLE
total change from your code to mine. 8 characters. Simple ain't it?
You have a problem within your CSS. You are setting the class for table, while as it should be for td.
You also need to modify your below js as style can be applied to td and not to tr
var rows = table.getElementsByTagName("td");
Here is the problem in your CSS
table.oddrowcolor{
background-color:#d4e3e5;
}
table.evenrowcolor{
background-color:#c3dde0;
}
You should be using this instead
table td.oddrowcolor{
background-color:#d4e3e5;
}
table td.evenrowcolor{
background-color:#c3dde0;
}
jsFiddle
Try this one ...see the Demo
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

HTML Table with vertical rows

How do I make vertical tables in HTML? By vertical, I mean the rows will be vertical with table headers on the left.
I also need it the way so I can access these rows (in this case vertical) as in a normal table, with <tr>. This is because I get the data dynamically for one row (like for row A) and insert it in the table. I am using angularJS to avoid DOM manipulation, so I am not looking for complex DOM manipulation with Javascript.
If you want <tr> to display columns, not rows, try this simple CSS
tr { display: block; float: left; }
th, td { display: block; }
This should display what you want as far as you work with single-line cells (table behavior is dropped).
/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }
/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left:0; }
<table>
<tr>
<th>name</th>
<th>number</th>
</tr>
<tr>
<td>James Bond</td>
<td>007</td>
</tr>
<tr>
<td>Lucipher</td>
<td>666</td>
</tr>
</table>
David Bushell has provided a solution and implementation here: http://dbushell.com/demos/tables/rt_05-01-12.html
The trick is to use display: inline-block; on the table rows and
white-space: nowrap; on the table body.
AFAIK, there is no magic solution to switch this around.
As for a rotation(90deg), that would most likely turn the whole table to the side, similar to how a sheet of paper would look if you turned in 90 degrees, and that's not what you want (I think?).
If this is possible (and realistic), I would suggest changing it in the HTML itself.
As indicated in the comments, there is no suggestion here, so here's a basic javascript alternative [even if this is not what you were looking for] using jQuery. Without knowing your experience, I've taken the time to comment everything to be sure you get what the code is doing.
// Change the selector to suit your needs
$('table').each(function(){
var table = $(this), // Reference each table in the page
header = $('thead', table), // Reference the table head
headings = []; // Set an array for each column
// If the table doesn't have a header, use it's footer for column titles
if(!header.length)
header = $('tfoot', table);
// If there's no header nor footer, skip to the next table
if(!header.length)
continue;
// Loop each heading to get the header value
$('th', header).each(function(){
var heading = $(this).html(); // Each heading value content, including any HTML; use .text() to use the text only
headings.push(heading); // Add heading value to array
});
// Make sure the content is wrapped in a tbody element for proper syntax
if(!$('tbody', table).length)
table.wrapInner('<tbody></tbody>');
// Set counter to reference the heading in the headings array
var x = 0;
// Loop through each row in the table
$('tbody tr').each(function(){
var row = $(this),
label = headings[x];
// Add the heading to the row, as a <th> for visual cues (default: bold)
row.prepend('<th>'+label+'</th>')
// Move to the next value in the headings value
x++;
});
});
You can use <th> as the first cell in the row.
Here's a fiddle: http://jsfiddle.net/w5nWG/
#vishesh so you want to transpose your table after DOM ready? try this http://gist.github.com/pgaertig/2376975
$(function() {
var t = $('#thetable tbody').eq(0);
var r = t.find('tr');
var cols= r.length;
var rows= r.eq(0).find('td').length;
var cell, next, tem, i = 0;
var tb= $('<tbody></tbody>');
while(i<rows){
cell= 0;
tem= $('<tr></tr>');
while(cell<cols){
next= r.eq(cell++).find('td').eq(0);
tem.append(next);
}
tb.append(tem);
++i;
}
$('#thetable').append(tb);
$('#thetable').show();
}
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
table { border-collapse: collapse; }
table tr { display: block; float: left; }
table tr tr{ display: block; float: left; }
table th, table td { display: block; border: none; }
try this
<table>
<thead>
<tr>
<th>id</th>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
css:
table, td, th {
border: 1px solid red;
}
thead {
float: left;
}
thead th {
display: block;
background: yellow;
}
tbody {
float: right;
}
Maybe this link won't help : rotate a table 90 degrees
neither would this one : http://www.w3.org/TR/html401/struct/tables.html
Otherwise, you can try this, has another user suggested (rejected and downvoted) :
table {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
This sounds silly, but hey, it's not worse than just not knowing the 'verry basic' HTML 4 table model.

html: hover table column [duplicate]

This question already has answers here:
Cols, colgroups and css ":hover" pseudoclass
(5 answers)
Closed 7 years ago.
How can I change the background column of an html table column when the mouse is over it?
Preferably with css only.
This can be done using CSS with no Javascript.
I used the ::after pseudo-element to do the highlighting. z-index keeps the highlighting below the <tds> in case you need to handle click events. Using a massive height allows it to cover the whole column. overflow: hidden on the <table> hides the highlight overflow.
Demo: http://jsfiddle.net/ThinkingStiff/2XeYe/
Output:
CSS:
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
HTML:
<table>
<tr>
<th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
</tr>
<tr>
<th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>
<tr>
<th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>
<tr>
<th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>
<tr>
<th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>
I have a more simple solution (Live example: http://jsfiddle.net/q3HHt/1/)
HTML:
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
table, td {
border: 1px solid black;
}
td {
width: 40px;
height: 40px;
}
.highlighted {
background-color: #348A75;
}
jQuery:
$('td').hover(function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').removeClass('highlighted');
});
Live example: http://jsfiddle.net/q3HHt/1/
Only works for cells or rows, sorry.
e.g.
td {
background-color: blue;
}
td:hover {
background-color: red;
}
There are JavaScript solutions available but nothing in CSS right now will do what you want because of the limitations of selectors.
td /* all cells */
{
background-color: blue;
}
tr /* all rows */
{
background-color: pink;
}
/* nothing for all columns */
Just to extends Muhammads answer (https://stackoverflow.com/a/11828637/1316280), if you want to highlight the cols only in the actual table, change the jquery-code-part to:
this jsfiddle is specific for only the actual table
jQuery
$('td').hover(function() {
var t = parseInt($(this).index()) + 1;
$(this).parents('table').find('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
var t = parseInt($(this).index()) + 1;
$(this).parents('table').find('td:nth-child(' + t + ')').removeClass('highlighted');
});
jsFiddle: http://jsfiddle.net/q3HHt/123/
I do not think there is a clean HTML + CSS way to do this. Javascript is an alternative, for example the jQuery tableHover plugin
I had a similar problem where I had too many columns to display on screen. VIA PHP, I turned each row into a 1 x column table. So, n rows = n tables. I then nested each table within a master table. Doing so allowed me to call td:hover from my stylesheet. Since each td held a table, it has the same effect of highlighting the a column when I mouse over it.
You can try experimenting with <col> tag and col:hover { background: red; } style, but I doubt that it will work. Anyway, this definitely won't work in older versions of MSIE, so you will need javascript in order to do this.
You can highlight the whole row with pure CSS using:
tr td {background-color: red;}
tr:hover td {background-color: blue;}
Achieving this effect for a column is impossible with this approach, as cell (td) is a child of a row (tr), not a column.
To make it work in IE7+, make sure to add doctype declaration (what you should always do anyway:)).

Categories