$('.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');
});
Related
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/
Can someone point out why this isn't working? I'm trying to click on Div A within a Container Div, and on click, go up to the parent container, find the next Div B, and toggle its visibility.
Note: The reason I'm doing it like this is I don't want to show ALL divs with the "child" class. Only the next one after the parent div.
http://jsfiddle.net/vecalciskay/54HxU/5/
HTML:
<div class="container">
<div class="parent">
<span> Parent Text (click) </span>
</div>
<div class="child">
<table>
<tr>
<td>
This
</td>
<td>
Table
</td>
</tr>
<tr>
<td>
Should
</td>
<td>
Expand
</td>
</tr>
</table>
</div>
<div class="parent">
<span> Parent 2 (don't click) </span>
</div>
<div class="child">
<table>
<tr>
<td>
This
</td>
<td>
Table
</td>
</tr>
<tr>
<td>
Should Not
</td>
<td>
Expand
</td>
</tr>
</table>
</div>
JQUERY:
$(document).ready(function () {
$('.child').hide();
$('.parent').click(function () {
var obj = $(this).parent().next(".child");
obj.toggle("fast");
return false;
});
});
Thanks to all the comments, I realized I was misinterpreting the siblings. Problem solved!
I know my title is quite confusing but let me explain.
Basically I want to manipulate a table to add and insert tr's and td's anytime because that is what I decided to do for my layout.It's like this:
On the first wave, let's say window = 1, the layout should simply shows one window:
[]
<tr>
<td>
</td>
</tr>
Second wave, window = 2:
[] []
<tr>
<td>
</td>
<td>
</td>
</tr>
Third wave, windows = 3:
[]
[]
[]
<tr>
<td>
</td>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
fourth wave, windows = 4:
[] []
[] []
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
Those brackets would be like a div inside a td. It does not matter on what is inside the div for as long as those windows are formatted that way.
I already got till second wave, but unable to proceed at window3. What I got is li
[]
[] []
<tr>
<td><div></td>
</tr>
<tr>
<td><div></td>
<td><div></td>
</tr>
Which is not suppose to be. How do I do it like the expected result as stated before in javascript? there will be like a trigger it to transform each wave. Any ideas? kindly help. Thanks
Use divs instead of tables. Start with a single container div that will hold all the others.
<div class="container">
</div>
On each iteration, add a child and change the class of the container to reflect having an odd or even number of children.
first:
<div class="container odd">
<div></div>
</div>
second:
<div class="container even">
<div></div>
<div></div>
</div>
third:
<div class="container odd">
<div></div>
<div></div>
<div></div>
</div>
and so on.
Then just write some css to put .odd in one column and .even in two.
I am playing around with the JavaScript functions insertAfter and insertBefore, however I am trying to insertAfter and insertBefore two elements.
For instance, consider the following HTML:
<table>
<tbody>
<tr>
<td>
Item 1
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Item 2
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
</table>
Then I have this JavaScript code snippet:
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
Basically when the Up class is called, the previous row is moved up and when the Down class is called, the current row is moved down one row.
What I want to do, is move the rows Up/Down 2 rows... meaning something like row.prev().prev() or row.next().next() however this does not seem to work.
Is there an easy way around this?
Would appreciate any help/suggestions.
to go up
row.prev().prev().before(row)
to go down
row.next().next().after(row)
obviously the tr must exist prev/next have to exist
NB you are caching row as the first tr element so row is changing every time the first tr element change
listen to event
$("table").on("click","tr > td > span.moveup", function() {
var row = $(this).parent().parent();
if (row.prev().prev().get(0)) row.prev().prev().before(row)
})
Does somebody know how to make a link form this image?
Do I have to change "background" to "img src"?
Or do I have to change the <a href>?
<td height="117" colspan="4" background="afbeeldingen/klein-2kolom_04.gif"> </td>
Backgrounds are backgrounds. Content is content. Links need to inform users about where they point and so require content. Table rows cannot have anchors as children. Table cells cannot have anchors as parents. The background attribute is obsolete.
<td>
<a href="index.html">
<img src="afbeeldingen/klein-2kolom_04.gif" alt="DON'T FORGET THIS">
</a>
</td>
One way would be to use the onClick event:
<td height="117" colspan="4" background="afbeeldingen/klein-2kolom_04.gif" onclick="location.href='index.html';"> </td>
To use a css based solution
<td height="117" colspan="4" background="afbeeldingen/klein-2kolom_04.gif">
</td>
Apply the following css
td a {
display:block;
}
I tested and modified Bangline solution:
<table>
<tr>
<td height="117" colspan="4" background="afbeeldingen/klein-2kolom_04.gif">
</td>
</tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
td a {
display:block;
height: 117px;
}
http://jsfiddle.net/gSVhP/2/