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.
Related
how would I access the hair with Javascript (as in Black)? I tried using normal accessing from within other elements gradually through defining variables accessing the table and tr it was in, but it still didn't work. Please respond if you have an answer. Thx
<table id="customers" class="customers">
<tr class="parent" data-toggle="toggle">
<th id="rank" style="text-align: center;">Number</th>
<th id="name" style="text-align: center;">Name</th>
<th id="name" style="text-align: center;"></th>
</tr>
<tbody class="content">
<div class="one">
<tr>
<td>1</td>
<td class="name">Object A</td>
<td class="down">
<button onclick="toggleText()" type="button" class="collapsible" id="1">
+
</button>
</td>
</tr>
</div>
<tr class="panel" id="one-a" colspan="3">
<div class="panel">
<td class="expand">
<div class="hair">
Black
</div>
</td>
</div>
</tr>
</tbody>
</table>
It may have something to do with the table being a table and not being able to fetch certain values like normal code.
Try
var hairColor = document.getElementsByClassName("hair")[0].innerHTML;
it will return an array of elements , your array will be of length 1 (because you only have one tag with the specified class, "hair" in this case) so the value you need is of index 0.
How to use JavaScript to get elements by class name?
When a cell is clicked the function is suppose to run.
Right now it is working only on the first row.
When i click on the button on a row i want that specific row to affect.
$(document).ready(function() {
function loadHistory() {
$('#btn').data('valType', 'more');
$('#btn').click(function() {
var id = $('#btn').data("valType")
})
}
})
In this case, use class selector, instead of id.
For example, yo have any list:
$(document).ready(function() {
$('.delete').click(function(e) {
$(this).parent().parent().remove();
})
})
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Chair
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Sofa
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Table
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Without the HTML code it is a bit more difficult to answer you, but I try.
Usually the ID is unique, so it's assigned to only one element, so try using the class selector.
Then another thing, I don't know if this is your case, if you go to create the other lines dynamically, the jQuery .click () function will not be able to manage the clicks on the elements created after loading the page. In this case use $.on('click', '.yourClass', function).
I hope I was helpful!
$('.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');
});
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 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)
})