Good day programmers,
Being an amateur, I hunted around and found someone who created a very nice jQuery drop-down table. I found a terrific one...
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
And the CSS...
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:left;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#222222 url(header_bkg.png) repeat-x scroll center left; color:#FFF; padding:3px 8px; text-align:center;}
#report td { background:#111111 none repeat-x scroll top left; color:#000; padding:3px 8px; text-align:center;}
#report tr.odd td { background:#000000 url(row_bkg.png) repeat-x scroll center left; cursor:pointer;}
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
By itself, it works just fine... you can see the gaming page I use it on at the following link:
http://www.mynextbit.com/Pages/Wreckedified/roster.html
I'm trying to figure out a way to make it to where I could drop down maybe 12 or so rows instead of just one to show a bunch of data about one of those characters in the table. I did some digging and thought I could re-write the jQuery using the
nth-child(12n+0)
But couldn't quite pull it off. Am I on the right track at least or is there a more obvious and simple solution?
Have you considered that it might be possible to simply start a new table within your rows so you can keep the existing functionality?
Right now your HTML looks a bit like this:
<table>
<thead>
<th>Character</th><th>iLevel</th><th>And your other columns...</th>
</thead>
<tbody>
<tr>
<td>CharacterName (Build)</td><td>559</td><td>other column data...</td>
</tr>
<tr>
<td>This is your hidden data row</td>
</tr>
</tbody>
</table>
Instead of trying to alter the script so that it hides/shows the next 12 <tr> tags you could just create a new table inside your hidden data row...
<table>
<thead>
<th>Character</th><th>iLevel</th><th>And your other columns...</th>
</thead>
<tbody>
<tr>
<td>CharacterName (Build)</td><td>559</td><td>other column data...</td>
</tr>
<tr>
<td>
<table>
<tr><td>Hidden data row 1</td></tr>
<tr><td>Hidden data row 2</td></tr>
<tr><td>Hidden data row 3</td></tr>
<tr><td>Hidden data row 4</td></tr>
<tr><td>Hidden data row 5</td></tr>
<tr><td>Hidden data row 6</td></tr>
<tr><td>Hidden data row 7</td></tr>
<tr><td>Hidden data row 8</td></tr>
<tr><td>Hidden data row 9</td></tr>
<tr><td>Hidden data row 10</td></tr>
<tr><td>Hidden data row 11</td></tr>
<tr><td>Hidden data row 12</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
But table are "oldschool" so if you draw a picture of what you want to display we might be able to give you some alternative ways too.
Related
Build the table with
for mobile layout, need to change layout like below. Not sure whether collapsible by Rows or columns.
Can bring this layout via CSS? In case, we need to add margin top & bottom for "B" row is it possible to update via CSS?
Can please provide your valuable comments?
Thanks
th, td{
width: 100px;
text-align: center;
border: 1px solid red;
}
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
I have the current following table:
<table border="1">
<tr>
<td></td>
<td>Banana</td>
<td>Orange</td>
<td>Plum</td>
</tr>
<tr>
<td>Banana</td>
<td>1:1</td>
<td>1:2</td>
<td>1:3</td>
</tr>
<tr>
<td>Orange</td>
<td>2:1</td>
<td>1:1</td>
<td>1,5:1</td>
</tr>
<tr>
<td>Plum</td>
<td>1:3</td>
<td>2:1</td>
<td>1:1</td>
</tr>
I am looking to cause a trigger when I am mousing over the cell dividers , AS indicated bellow. This needs to be done in either HTML/CSS/jss. I can easily figure out a hover for the table or for the individual cells, but how could I get something to trigger when hovering over the cell dividers? (see following image)
tr td{
position:relative;
}
tr td::after{
position:absolute;
right:-2px;
width:4px;
cursor:pointer;
top:0px;
height:100%;
z-index:1;
}
tr td::nth-last-of-type::after{
display:none;
}
Now you can trigger anything by selecting 'tr td::after' as a selector
Also, width and right can be changed according to your border/padding of the cells.
I have a table with one header and columns, and I am expand/collapse based on header click by the below code:
$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
My table is below:
What I need is. When I click first then it should collapse and show only first column that mean the column with data1 others should hide as below:
And it should show + button and when I click again it should go back to previous state.
Please note fiddle: Fiddle
Use:
$(this).toggleClass('expand').next('tr').find('td').not('td:first')
To exclude the first td.
Use this if you have more than one row:
$(this).toggleClass('expand').nextAll('tr').find('td').not('td:first-child').slideToggle(100);
Demo
$('.header').click(function() {
$(this).toggleClass('expand').nextAll('tr').find('td').not('td:first-child').slideToggle(100);
});
table,
tr,
td,
th {
border: 1px solid black;
border-collapse: collapse;
}
tr.header {
cursor: pointer;
}
.header .sign:after {
content: "+";
display: inline-block;
}
.header.expand .sign:after {
content: "-";
}
<table border="0">
<tr class="header expand">
<th colspan="4">Header <span class="sign"></span></th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm looking for a quick way to get a responsive html table for a huge set of data (more than 500 row with 15 columns by row).
I tried many javascript solutions like footable but it's really too slow.
The footable render is perfect but I would like to find a similar solution with only css tricks.
The main goal is to have a normal table for desktop and a partial table with only some columns displayed in mobile version and a click action that expand the rest of the columns Under the current table row like footable.
html example
<table class="f-tab">
<thead>
<tr>
<th>name</th>
<th>d1</th>
<th>d2</th>
<th>d3</th>
<th>d4</th>
<th>d5</th>
<th>d6</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">item 1</td>
<td class="d1">val 1</td>
<td class="d2">val 2</td>
<td class="d3">val 3</td>
<td class="d4">val 4</td>
<td class="d5">val 5</td>
<td class="d6">val 6</td>
</tr>
...
</tbody>
</table>
css example
.f-tab {
min-width: 320px;
}
.f-tab th, .f-tab td {
display: none;
}
.f-tab tr.visible td {
display: block;
}
.f-tab td.name, .f-tab td.d1, .f-tab td.d3 {
display: inline-block;
}
#media (min-width: 480px) {
.f-tab th, .f-tab td {
display: table-cell;
}
}
.f-tab {
overflow: hidden;
}
js example
$(".f-tab tr").click(function () {
$(this).toggleClass("visible");
});
in my example, I want to display the column "name", "d1" and "d3" as table columns and have the other columns in display block Under the current row when I click on a tr.
___________________
name | d1 | d3
d2
d4
d5
d6
___________________
I tried at first with nested ul/li but I couldn't get something good.
I have this
header1 header2
data1 data2
But I want to display it as
h h
e e
a a
d d
e e
r r
1 2
data1 data2
I also want borders around the headers and table rows.
EDIT:
Based on Vinc199789's answer below I came up with this.
<table>
<tr style="border 1px solid;text-align:center;">
<th style="width:1px;word-break:break-all;border:1px solid;text-align:center;"><div style="width:1px;word-break:break-all;text-align:center;">Jill</div></th>
<th style="width:1px;word-break:break-all;border: 1px solid;"><div style="width:1px;word-break:break-all;">Smith</div></th>
<th style="width:1px;word-break:break-all;border: 1px solid;"><div style="width:1px;word-break:break-all;">50</div></th>
</tr>
<tr>
<td style="border: 1px solid;">Eve</td>
<td style="border: 1px solid;">Jackson</td>
<td style="border: 1px solid;">94</td>
</tr>
</table>
However I need the following improvements on this:
If you see the output, there is a gap above J in "Jill" , "Smith" occupies the entire vertical space and "50" is in the middle. Is there a way to make all the headers start from the ceiling of the vertical space?
I also wanted a way to center align "Jill", "Smith" and "50". text-align:center is not working.
You can use css word-break: break-all
What I did is I added a div inside a td and set the width to 1px (this to make sure that there can not be two letters placed next to each other). I also added word-break: break-all and you can see the result in the code snippet or is this fiddle.
edit
With margin-left:auto and margin-right:auto I center the vertical headers and with text-align:center I center the other table content.
If you add vertical-align:top to the td you also have your headers placed at the top
updated fiddle
td > div{
width:1px;
word-break: break-all;
margin-right:auto;
margin-left:auto;
}
td{
text-align:center;
vertical-align:top;
}
<table style="width:100%">
<tr>
<td><div>Jill</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>