Find all elements with matching indexes and get largest attribute - javascript

I'm trying to dynamically set heights across all table headings based on the tallest corresponding div on its index. I will be using MaterializeCSS which responsively makes the headings display block and the content scroll right to left.
I'll use a super simple example.
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>This content is 100px</td>
<td>This content is 50px</td>
</tr>
<tr>
<td>This content is 50px</td>
<td>This content is 200px</td>
</tr>
</tbody>
In the example I showed, I'd like to set the height of the th for heading 1 to 100px and the height of th for heading 2 to 200px.
I tried a few things and got completely lost. Maybe I was trying to get too cute with it. The logic I was attempting was:
For each th in thead
Find td with same index as the th within each tr within tbody and get largest height
Set height of th
I get that it would start with $('th').each(function () { //magic goes here });
Here is a Codepen I have to show my progress on it: https://codepen.io/hdwebpros/pen/vjbwyw
Thanks in advance for any help or guidance. I appreciate it!

You could do the following:
for each row tr
for each column td
compute the max height h[c] of every column with the same index
assign the max height to each column with the same index
var h = [];
$("#table tr").each(function(r, tr) {
$(tr).find("td").each(function(c, td) {
if (c == 0) {
h.push($(td).height());
} else {
if ($(td).height() > h[c]) {
h[c] = $(td).height();
}
}
});
});
for (var c = 0; c < h.length; c++) {
$("#table td:eq(" + c + ")").css("height", h[c]);
}
td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<thead>
<th>Heading 1</th>
<th>Heading 2</th>
</thead>
<tbody>
<tr>
<td style="height: 100px;">This content is 100px</td>
<td style="height: 50px;">This content is 50px</td>
</tr>
<tr>
<td style="height: 50px;">This content is 50px</td>
<td style="height: 200px;">This content is 200px</td>
</tr>
</tbody>
</table>

Related

How can I create a virtual table by reusing fixed number of rows with both mouse wheel and scrollbar support?

I have a large size of data to show as a table on my page and render a table with all the data is too heavy.
So I want to show it as a virtual table that render cells only when necessary.
I know there is a way to fix the header and scroll the tbody, but by that way header widths must be fixed while I want the width could automatically changed according to the data.
So I consider to reuse a fixed number of rows to solve this problem.
I work this out, which works for mouse wheel, but I also want a scrollbar so that users without a mouse wheel could also scroll it.
function updateTable(event) {
var topIdTd = document.getElementById('data-0-id');
var topId = parseInt(topIdTd.innerHTML);
topId += event.deltaY;
for (var i = 0; i < 4; i++) {
document.getElementById('data-' + i + '-id').innerHTML = topId + i;
document.getElementById('data-' + i + '-value').innerHTML = 'looooooooooooooooooooong-value-' + topId + i;
}
return false;
}
var tbody = document.getElementById('table-body');
tbody.onwheel = updateTable;
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid gray;
}
th {
background-color: #eef;
}
<table>
<thead>
<tr>
<th>
ID
</th>
<th>
Value
</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<td id="data-0-id">
0
</td>
<td id="data-0-value">
looooooooooooooooooooong-value-0
</td>
</tr>
<tr>
<td id="data-1-id">
1
</td>
<td id="data-1-value">
looooooooooooooooooooong-value-1
</td>
</tr>
<tr>
<td id="data-2-id">
2
</td>
<td id="data-2-value">
looooooooooooooooooooong-value-2
</td>
</tr>
<tr>
<td id="data-3-id">
3
</td>
<td id="data-3-value">
looooooooooooooooooooong-value-3
</td>
</tr>
</tbody>
</table>
How can I create a scrollbar on an unscrollable element?
Or is there any better solutions for this problem?

removing some empty table details and adding classes and width

I am trying to remove the empty code from table with jquery and add some class to the table tags
like i am trying to remove <td class="faux_align"></td> and <th class="faux_align"></th> from the table and check if the table already has a class of table - do nothing and if it does not have a class of table' - do add the classtable` to the table tag.
and also checking if the width attribute is defined within table and if not, add width as 100% and if defined but width is not 100%, make its width 100%
I am trying something like this:
$('table > tr > td').remove();
and same with th tag, but i am confused how do i do with remaining this in one single jquery function.
$('table').addClass('table').attr('width', '100%').find('td.faux_align, th.faux_align').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="">
<tr>
<th class="faux_align">faux</th>
<th>text</th>
</tr>
<tr>
<td class="faux_align">faux</td>
<td>text</td>
</tr>
</table>
<table class="table">
<tr>
<th class="faux_align">faux</th>
<th>text</th>
</tr>
<tr>
<td class="faux_align">faux</td>
<td>text</td>
</tr>
</table>

how do you create a scroll bar menu that scrolls only on the content and not on the header

I have a list of names : first and last. The list is long, so I need to have a scroll bar menu. When I scroll, I should only scroll on the names and not on the column header.
I managed to do so but the problem is that the second column elements are not displayed right under the column name as you can see here http://jsfiddle.net/MmLQL/44/.
<table border=1 width=200px >
<tr>
<th>First Name</th>
<th>looong column name </th>
</tr>
</table>
<div class="div_scroll">
<table border=1 width=200px >
<tr>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
</div>
And even if I put the header and the content in the same table, and create a div to wrap the table content and add a class to that div to enable scrolling, it doesn't work http://jsfiddle.net/MmLQL/43/
What am I doing wrong?
You probably don't need javascript for this. Just set the widths of the columns to be equal. Here's a quick example:
th, td {
width: 50%;
}
View it on JSFiddle
You need to set the width of the columns to be the same for each table. Maybe create a css class for each column and apply them to the columns in the tables.
Example CSS classes:
.ColumnOne { width: 40%; }
.ColumnTwo { width: 60%; }
Then apply to the columns:
<table border=1 width=200px >
<tr>
<th class="ColumnOne">First Name</th>
<th class="ColumnTwo">looong column name </th>
</tr>
</table>
<div class="div_scroll">
<table border=1 width=200px >
<tr>
<td class="ColumnOne">John</td>
<td class="ColumnTwo">Smith</td>
</tr>
...

HTML column width changes when table row is hidden

I am a relative newcomer to web programming, so probably I am making some obvious mistake here.
When I am trying to hide a row in a table from javascript like rows[i].style.display = 'none', the table layout is getting completely broken. Originally, the cell content was getting wrapped, and the table width was getting shrunk. I then added style="table-layout: fixed" in the table tag and style="white-space:nowrap" in each td. This stopped the line wrapping, but still the content was not aligned on a line. Cells started moving left if there is space and column width varied from one row to another. I then added a fixed width to each of the th and td element and also to the div containing the table. Still the problem remained.
My current HTML is something like the following.
<div style="width: 300px">
<table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed">
<tr id="HeaderRow">
<th style="width: 100px;">Header 1</th>
<th style="width: 50px;">Header 2</th>
<th style="width: 150px;">Header 3</th>
</tr>
<tr id="DetailRow1">
<td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td>
<td style="white-space:nowrap; width: 50px;">Data 1_2 in Row 1</td>
<td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td>
</tr>
<tr id="DetailRow2">
<td style="white-space:nowrap; width: 100px;">Data 2</td>
<td style="white-space:nowrap; width: 50px;">Data 2</td>
<td style="white-space:nowrap; width: 150px;">Data 2</td>
</tr>
<tr id="DetailRow3">
<td style="white-space:nowrap; width: 100px;">Data 3_1</td>
<td style="white-space:nowrap; width: 50px;">Data 3_2</td>
<td style="white-space:nowrap; width: 150px;">Data 3_3</td>
</tr>
</table>
</div>
When the table is displayed first time, the columns are aligned properly, with width 100, 50 and 150 px respectively. But if a row, say the second one is hidden, the cell width of the remaining two displayed rows are no longer fixed at 100, 50 and 150 and data is no longer aligned vertically. Please note that the overall table width remains 300 px. Data in each cell moves left if there is available space and the additional space is used by the last, in this case, third column.
The following post was helpful but did not solve my problem fully, as you can see.
Hiding table rows without resizing overall width
Any help will be most welcome.
The problem is the display type that you use to make the table-row visible.
To hide a table-row use display="none"
To show a table-row use display="table-row"
I did a sample so you can see these in action.
function show(){
document.getElementById('trB').style.display='table-row';
}
function hide(){
document.getElementById('trB').style.display='none';
}
#import url("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css");
table{
border: 1px solid #ccc;
}
<table id="myTable" class="table table-striped table-hover">
<thead>
<tr>
<td>#</td>
<td>Letter</td>
</tr>
</thead>
<tbody>
<tr id="trA">
<td>1</td>
<td>A</td>
</tr>
<tr id="trB">
<td>2</td>
<td>B</td>
</tr>
<tr id="trC">
<td>3</td>
<td>C</td>
</tr>
</tbody>
</table>
<button id="showB" onclick="show()">show B</button>
<button id="hideB" onclick="hide()">hide B</button>
Hope this could help who are struggling with the same problem.
Instead of using display: none; I used visibility: collapse; for the hidden rows. This still keeps the width of the columns and the whole layout.
I had the same problem: I tried to hide a column by elem.style.display="none" but when showing again the layout was broken. This display-style worked for me:
columns.item(i).style.display = "table-cell";
Always fix the width of your columns. Would that sole your problem?
.myTable td{ width:33% !important; }
Ideally, you should also enclose header and body sections using thead and tbody
<table>
<thead>
<tr> ... </tr>
</thead>
<tbody>
.
.
.
</tbody>
</table>
I'm having the same problem. I threw a span inside of each table to see if I could force the width and it seems to work. It's ugly though.

CSS: how to dynamically grow/shrink an HTML table column

I have a HTML like so:
<table>
<tr>
<th>colA heading</th>
<th>colb heading</th>
</tr>
<tr>
<td>colA content</td>
<td>colb content</td>
</tr>
<tr>
<th>colC heading</th>
<th>colD heading</th>
</tr>
<tr>
<td>colC content</td>
<td>colC content</td>
</tr>
</table>
That products the following output:
colA heading colB heading
colA content colB content
colC heading colD heading
colC content colD content
what I want to do is detect using presumably JavaScript, if the page is wide enough, dynamically change my table look like so:
colA heading colB heading colC heading colD heading
colA content colB content colC content colD content
How can I do that using HTML (and JavaScript/CSS if need be)?
Thanks
If I understand your question correctly, this is achievable by splitting your table into two tables, like so:
<head>
<style>
.bigBox {
margin: 0px;
padding: 0px;
float: left;
clear: right;
display: inline;
border: 1px solid black;
}
</style>
</head>
<body>
<table class="bigBox">
<tr>
<th>colA heading</th>
<th>colb heading</th>
</tr>
<tr>
<td>colA content</td>
<td>colb content</td>
</tr>
</table>
<table class="bigBox">
<tr>
<th>colC heading</th>
<th>colD heading</th>
</tr>
<tr>
<td>colC content</td>
<td>colC content</td>
</tr>
</table>
</body>
The border is for ease of testing only. All you have to do to test is set the contents of one of the cells to something like "colb headingggggggggggggggggggggggggggggggggggggg."
How would you determine that the table should be able to fit in one table?
Are you starting from two tables, going to one table, or from one -> 2?
It would be easiest to either start with one table, and if the scrollbars are active then do something like the following tiny snippet. You should use firebug, in firefox, to examine the dom attributes of the table, to determine the properties to use.
var tableelem = document.createElement('table');
var thead = document.createElement('thead');
for(var t = 0; t < 2; t++) {
var trow = document.createElement('tr');
var tdata = document.createElement('td');
tdata.appendChild(document.createTextNode('header'));
thead.appendChild(trow);
}
tableelem.appendChild(thead);
You will need to use document.getElementById to get the table you will be pulling from, and then the header will be in table.rows[0], so you can parse the cells in that row and get the values where I put header above.
You will then need to add the tableelem to the div using the appendChild function.

Categories