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)
})
Related
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!
Sort of an odd question, but I'm having some trouble coming up with a good selector to do this. The jsfiddle is here: http://jsfiddle.net/NZf6r/1/
In short, I have a parent table which has a "select all" checkbox as a column in the thead. Every table row also has a checkbox. The intention is if they click the checkbox, I select (or deselect) all of the row checkboxes in the tbody. Simple, right?
However, there a rows in the table that function as child tables for each row. These child tables also have checkboxes and also have a need for the same "select all" scheme.
The tricky part is not getting the "select all" in the parent table to also select the children. My current event function looks like this (also on the jsfiddle):
$('th input').on('click', function(event) {
var isChecked = $(event.target).is(':checked');
$(event.target)
.parents('table')
.first()
.find('input[type="checkbox"]')
.each(function(i, checkbox) {
$(checkbox).prop('checked', isChecked);
});
});
I know I can use direct child selectors (>), but I'm not quite sure of the best way to incorporate that.
I also know I could add a class to the checkboxes for each table type (parent vs. child) and add that to the input selector, but I'm curious if there's a way I can avoid doing that. Some jQuery magic, if you will.
Here is the rough HTML of things (not the full table, obviously) in case you can't access the jsfiddle:
<table>
<thead>
<tr>
<th style="width:20px">
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Aaaaa</td>
</tr>
<tr>
<td colspan="2">
<div style="padding-left: 20px">
<table>
<thead>
<tr>
<th>
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Aaaaa</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Bbbbb</td>
</tr>
<tr>
<td colspan="2">
<div style="padding-left: 20px">
<table>
<thead>
<tr>
<th>
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Bbbbb</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Use this script instead:
$('th input').on('click', function(event){
var parenttable = $(this).parents('table:first');
var isChecked = $(event.target).is(':checked');
parenttable.find(">tbody>tr>td>div>input").prop('checked', isChecked);
});
try this demo
$('th input').on('click', function (event) {
var isChecked = $(event.target).is(':checked');
$(event.target)
.closest("table")
.find('> tbody > tr:not(:has(table)) > td input[type="checkbox"]')
.each(function () {
$(this).prop('checked', isChecked);
});
});
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 trying to count the number of elements under a parent but its giving me an incorrect count. The result should be 2, where as its returning me 4.
My HTML structure is:
<div style="overflow: hidden;" id="parentDiv" class="scroll">
<div id="3">
<table id="t3" class="Table">
<tbody>
<tr>
<td id="b3" class="bY"><table id="inner1" width="100%" cellpadding="3">
<tbody>
<tr>
<td class="code" id="code3" width="172"></td>
<td class="Num" id="Num3" width="50"></td>
<td colspan="2" class="Name" id="Name"></td>
</tr>
<tr>
<td class="code" width="172"></td>
<td> </td>
<td class="serial" width="110"></td>
<td class="serial" width="322"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<div id="4" >
<table id="t4" class="Table">
<tbody>
<tr>
<td id="b4" class="bY"><table id="inner1" width="100%" cellpadding="3">
<tbody>
<tr>
<td class="code" id="code4" width="172"></td>
<td class="Num" id="Num4" width="50"></td>
<td colspan="2" class="Name" id="Name"></td>
</tr>
<tr>
<td class="code" width="172"> </td>
<td> </td>
<td class="serial" width="110"></td>
<td class="serial" width="322"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
and the code I am using to count is:
var numofDivs = $("#parentDiv div").size();
alert(numofDivs);
and if I am using the following code, the result is coming 1 (which is incorrect too).
var numofDivs = $("#parentDiv > div").size();
alert(numofDivs);
Hi you should use the function children()
$("#parentDiv").children("div").length
the function gives you an array and ten you can get the length.
and in the children function you can specify what tags to filter, but you can also leave it blank and it will give you all the children
check the API
With the give HTML code, your code to count the elements is correct, and both ways should return two.
So, the conclusion is that the HTML code doesn't actually look the way that you describe it. A structure that would give that result could for example look like this:
<div id="parentDiv">
<div>
<div></div>
<div></div>
</div>
<p>
<div>
</div>
</p>
</div>
If you want to count the first level of div elements that you encounter, you would have to do it recursively, i.e. for each child element check if it's a div element or count the number of first level div elements it contains:
function countDivs(element) {
var cnt = 0;
$(element).children().each(function(){
cnt += this.tagName === 'DIV' ? 1 : countDivs(this);
})
return cnt;
}
$(function(){
alert(countDivs($('#parentDiv').get(0)));
});