I have a table and the last should show additional on click. Everything works fine, but I need a transition (after click the table should expand smoothly).
My test table:
<div ng-app="app">
<table>
<thead ng-controller="TestController">
<tr>
<th>
head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
first
</td>
</tr>
<tr>
<td>
second
</td>
</tr>
<tr ng-show="display">
<td>
third
</td>
</tr>
<tr ng-show="display">
<td>
fourth
</td>
</tr>
<tr ng-show="display">
<td>
fifth
</td>
</tr>
<tr ng-click="display = !display" class="last-color">
<td>
click me
</td>
</tr>
</tbody>
</table>
</div>
CSS:
table {
border: solid 1px;
}
td {
border: solid 2px;
}
.last-color td {
background-color: green;
}
tbody {
transition: height 2s;
}
My example on JSFiddle
First of all, CSS3 transitions allow you to change property values smoothly (from one value to another), over a given duration. In other words, in order to see a transition working, you should specify both values in your CSS explicitly.
More over, you cannot apply height transitions to table elements (<table>, <tbody>, <tr>, <td>, etc.). However, if you can wrap the contents with <div> elements, you can apply CSS transitions to the <div> elements.
Just for example: https://jsfiddle.net/r4w1u5or/3/
Related
I want every other row to be gray, but in the following example - all rows become gray.
<table>
<tr v-for="i in item.env_vars" :style="{'background': index % 2 === 0 ? '#eee' : '#ccc' }">
<td> test1 </td>
<td> test2 </td>
<td> test3 </td>
</tr>
</table>
and I see this error in vue admin tool:
Property or method "index" is not defined on the instance but referenced during render.
What is wrong with my code?
I'm not familiar with vue, but I think you need to add an index variable to your loop:
<tr v-for="(i, index) in item.env_vars"
You can do this with a simple nth-child rule:
table {
width: 100%;
}
tr:nth-child(odd) {
background: #eee;
}
tr:nth-child(even) {
background: #ccc;
}
<table>
<tr>
<td>hi</td>
</tr>
<tr>
<td>hi</td>
</tr>
<tr>
<td>hi</td>
</tr>
<tr>
<td>hi</td>
</tr>
</table>
Maybe somewhat like this question, but example in accepted seems not working.
I want to show here, Action button, on hovering the row. So when I hover to particular table row, so only that row's action button should be displayed and all others should be hidden.
So how can I achieve this? Is jQuery required or is it possible through Pure CSS?
<table class="table">
<thead>
<tr>
<th>Instance Id</th>
<th width="150px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
</tbody>
</table>
It is pretty straight-forward and can be done with CSS.
You want a hover on the <tr> element (i.e. tr:hover) to change the display property of a descendant (i.e. .action). So the selector to use would be tr:hover .action.
Here's the working snippet:
.action {
display: none;
}
tr:hover .action {
display: inline;
}
<table class="table">
<thead>
<tr>
<th>Instance Id</th>
<th width="150px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
</tbody>
</table>
You can read more about the descendant selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
Found the solution Pure CSS:
.table tbody tr td a{
display: none;
}
.table tbody tr:hover > td a{
display: block;
}
I am not such an expert in CSS;
My question is: can a div tag inherit dimensions from a table rows based on table row's class or id?
For example: We have a table with a couple of rows, but we don't know exact size of one table row, but we know the id/class of the rows. And by absolute positioning a div tag on table based on id/class to fill up 2 rows from start to end!
Can anyone point me to some addresses or to give me a tip code?
<table>
<col width="9%">
<thead>
<tr>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2"> </th>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<th rowspan="2"> </th>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
I search for something like this:
You can take the width and height of parent td and then set them to the div using javascript.You want something like this?
https://jsfiddle.net/toLacq32/1/
$(document).ready(function(){
tdWidth = $('#inner-div').closest('td').width();
tdHeight = $('#inner-div').closest('td').height();
$("#inner-div").width( tdWidth ).height(tdHeight);
});
I have the following table that pull out from database within loop.
I would like to drag and drop the following rows.
The rowspan of "Sort" button column is dynamic. (It will be the count of rows).
My problem is when I drag the row to sort, I don't want to include "Sort" button column.
After I drag the first row, "Sort" button column has been moved with the dragged row as the following.
Thanks
Poor Semantics
The main problem here is that your save button is part of your table. Why? The table element is used to represent tabular data, and a button isn't tabular data.
You'd avoid this problem completely if your HTML was more accurately semantic:
<!-- Section A -->
<section>
<table>
...
</table>
<button>Save</button>
</section>
With this, you'd be able to drag rows and not worry about your button being included in the drag at all. You'd have a separate section element wrapping each of your related section tables, and the button is standalone.
Using CSS we can style the button to be where we want it in relation to the table. A first step being to set the table to display: inline-table to allow the button to sit beside it.
Demo
section {
margin-bottom: 20px;
}
table {
display: inline-table;
vertical-align: top;
}
th, td {
text-align: left;
}
button {
vertical-align: bottom;
}
<section>
<table>
<thead>
<tr>
<th colspan="3">Section A</th>
</tr>
<tr>
<th>Name</th>
<th>Section</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>13</td>
<td>SG</td>
</tr>
<tr>
<td>BB</td>
<td>16</td>
<td>JP</td>
</tr>
</tbody>
</table>
<button>Save</button>
</section>
<section>
<table>
<thead>
<tr>
<th colspan="3">Section B</th>
</tr>
<tr>
<th>Name</th>
<th>Section</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>13</td>
<td>SG</td>
</tr>
<tr>
<td>BB</td>
<td>16</td>
<td>JP</td>
</tr>
</tbody>
</table>
<button>Save</button>
</section>
$('.details').click(function(){
$(this).index()+1).toggleClass('.details, .overlay-wrapper');
});
Each table cell has some details/content in (hidden). Whenever a user selects the cell I need to pass through the index so only the details/div within the cell is shown.
Every single cell in the table has a div/details within the cell. So I need to only toggle on and off the div within the correct cell. At the moment it toggles every single details div on the page.
Thank you
JsFiddle is below with the html.
http://jsfiddle.net/t6yczwuo/
You have several problems with the code shown:
Unmatched bracket
Incorrect parameters for toggleClass (no . and no comma)
Without HTML this is all guesswork, but you seldom need the index to work with related cells. The following mockup use closest() to find the TD parent, then find() to find another related cell in the same TD:
$('.details').click(function(){
$(this).toggleClass("details overlay-wrapper").closest('td').find('.someother').toggle();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/gj2zz8po/
This example simply toggle the classes you specified on the details div, and hides/shows a related div within the same TD.
If you use this JSFiddle as the start of your example we can customise the code to match your situation.
Update for your new HTML:
$('.details-more').click(function (e) {
e.preventDefault();
$(this).closest('td').find('.overlay-wrapper .details').toggle();
});
http://jsfiddle.net/TrueBlueAussie/gj2zz8po/2/
Note: The e.preventDefault() should be used, even on bookmark links, to stop the page move to the top when clicked on a longer page.
You need .next() and not index().
.toggleClass() accepts just a single class name without a .. Also, toggling the class on which you are using any kind of selector is not recommended.
$('.details-more').click(function(e){
e.preventDefault();
$(this).next('.overlay-wrapper').find('div').toggleClass('details');
//Instead of find('div') you could use a specific class selector -
//find('.targetHidden') provided this class remains static throughout the html.
});
Updated Fiddle
HTML
<table style="width:100%">
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
<tr>
<td>
Details
<div class="overlay-wrapper details">
<div class="">THIS IS THE SOME DETAILS OR CONTENT</div></div>
</td>
<td>
<div class="details"></div>
</td>
<td>
Details
<div class="overlay-wrapper details">
<div class="">THIS IS SOME MORE CONTENT</div></div>
</td>
</tr>
<tr>
<td>
<div class="details"></div>
</td>
<td>
Details
<div class="overlay-wrapper details">
<div class="">SOME TEST RANDOM STUFF</div></div>
</td>
<td>
<div class="details"></div>
</td>
</tr>
<tr>
<td>
<div class="details"></div>
</td>
<td>
<div class="details"></div>
</td>
<td>
Details
<div class="overlay-wrapper details">
<div class="">SOME MORE CONTENT</div></div>
</td>
</tr>
<tr>
<td>
<div class="details"></div>
</td>
<td>
<div class="details"></div>
</td>
<td>
<div class="details"></div>
</td>
</tr>
</table>
CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
.details {display:none;}
Javascript
$('.details-more').click(function(){
$(this).next('.overlay-wrapper').toggleClass('details');
});