Display html result at each round of javascript for loop - javascript

This has got to be answered already, but I can't find it.
[EDIT: very similar solution here:
Fade in each li one by one, however do have a look at WaldemarIce's solution below which also takes care of infinite looping very nicely]
I want consecutive rows of a table to be shown with fade in and fade out, one at a time, while all the other rows are hidden. I am using jQuery, see code below.
What I want to happen is for each row to fade in and out, one after the other.
What happens is that all the rows fade in and out together, simultaneously. How do I separate the events?
$(document).ready(function(){
for(i=0;i<3;i++){
var eqvar = "tr:eq(" + i + ")";
var thisrow = $("table#hidden").find(eqvar);
$(thisrow).fadeIn(2000);
$(thisrow).fadeOut(2000);
}
});
.hide{
display:none;
}
<table id="hidden"><tbody>
<tr class="hide"><td>Row 1</td></tr>
<tr class="hide"><td>Row 2</td></tr>
<tr class="hide"><td>Row 3</td></tr>
</tbody></table>

Example of code showing each row of the table, one at time, in infinite loop:
$(document).ready(function(){
function present () {
$('#hidden tr')
.each(function (idx) {
$(this).delay(idx * 1300).fadeIn(250).delay(800).fadeOut(250)
})
.promise().then(present)
}
present()
})
.hide {
display: none;
}
<table id="hidden">
<tbody>
<tr class="hide"><td>Row 1</td></tr>
<tr class="hide"><td>Row 2</td></tr>
<tr class="hide"><td>Row 3</td></tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

you can use like this:
$(document).ready(function(){
$("table#hidden tr").each(function(i,v){
setTimeout(function(){
var thisrow = $(v);
$(thisrow).fadeIn(2000);
$(thisrow).fadeOut(2000);
}, 4000 * i);
});
});

Related

How to scroll to the last position (item 10) of the table on the top of the DIV?

HTML code -
<div id="scroll-pane" style="width:250px; height:100px; overflow-y:scroll; overflow-x:hidden;">
<table>
<tr><td>item 0</td></tr>
<tr><td>item 1</td></tr>
<tr><td>item 2</td></tr>
<tr><td>item 3</td></tr>
<tr><td>item 4</td></tr>
<tr><td>item 5</td></tr>
<tr><td>item 6</td></tr>
<tr><td>item 7</td></tr>
<tr><td>item 8</td></tr>
<tr><td>item 9</td></tr>
<tr><td>item 10</td></tr>
</table>
</div>
Javascript code -
var divEl = document.getElementById("scroll-pane");
var selectedTrEl = undefined;
function select(index) {
var trEl = divEl.getElementsByTagName("tr")[index];
if(selectedTrEl) {
selectedTrEl.className = "";
}
selectedTrEl = trEl;
selectedTrEl.className = "selected";
var scrollTo = selectedTrEl.offsetTop;
divEl.scrollTop = scrollTo;
}
select(10);
JS example:
http://jsfiddle.net/7a960tdr/1/
I want that item 10 show in the top of the div, but seems I've to do something else to do it.
If you want the element 10 being scrolled up the first, you will need to add something on the bottom to elevate it, you may want to make the last element bigger than the others so there'll be white space on the bottom of the scrollable list. I don't know if margin or padding will make the work too.

How to remove Options from multiselect dropdown in Jquery

I have some table column with some preselected values and now i want to remove those selected values from dropdown(ddlMultiselect) .. Both table column and dropdown option values are same and what i want that those values should be hide/remove from dropdown as per if condition.
$('#sometabletr:gt(0)').each(function () {
var row = $('td:eq(0) > span', this).text();
$('#ddlMultiselect :selected').each(function () {
var col = $(this).val();
if (row == col) {
$(this).remove();
}
});
});
This is the way is do it, fast and easy way
$('#listname option:selected').each(function (index, option) {
$(option).remove();
});
There is another way to approach this issue.. but setting up classes on the table rows, all you have to do is change the class of the table element itself to hide/show vast amounts of things while only doing a single repaint, which GREATLY improves performance.
In this example, I have the adding of a class hard-coded, but you could use jQuery's addClass and removeClass or look up the best alternatives available.
<doctype html>
<html>
<header>
<title>Demo HIde</title>
<style>
#mytable.even tr.odd {
display:none;
}
</style>
</header>
<body>
<table id="mytable">
<tr class="odd"><td>1</td></tr>
<tr class="even"><td>2</td></tr>
<tr class="odd"><td>3</td></tr>
<tr class="even"><td>4</td></tr>
<tr class="odd"><td>5</td></tr>
<tr class="even"><td>6</td></tr>
</table>
<script>
// Show the even values only
document.getElementById("mytable").className += " even";
</script>
</body>
</html>

Getting every <td> in <tr> by index?

I want to find all td's by index (1) in every row. How can I accomplish this?
My HTML:
<table>
<thead><tr><th>Maandag</th><th>Dinsdag</th><th>Woensdag</th><th>Donderdag</th><th>Vrijdag</th></tr></thead>
<tbody>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
</tbody>
</table>
Javascript:
var index = 1;
$('tbody').children().children(':eq(' + index + ')');
This code doesn't work because it gets all children of the row and THEN gets the index. I need every second TD in every row.
You can use the nth-child selector
var index = 1;
$('tbody').find('td:nth-child('+(index+1)+')');
Demo: Fiddle
Or just plain vanilla-js
var index = 2,
tdElArr = document.querySelectorAll('table tbody tr td:nth-child(' + index + ')');
// to test this:
for(var i=tdElArr.length;i--;){
tdElArr[i].style.backgroundColor = '#cdedff'
}
table {border-collapse: collapse;}
table, th, td {border: 1px solid black;}
<table>
<thead><tr><th>Maandag</th><th>Dinsdag</th><th>Woensdag</th><th>Donderdag</th><th>Vrijdag</th></tr></thead>
<tbody>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
</tbody>
</table>
Working example http://jsfiddle.net/LZH87/
$('tbody').children().children('td:nth-child(2)').each(function() {
$(this).css({background: 'blue'});
});
I just added the css background blue to confirm that it works
This could also work (jsfiddle example)
$('tbody').children().each(function(){
$(this).find('td:odd').css({background: 'red'});
});
It's using the :odd or :even selectors in jQuery.
Try this
$('tbody').find('tr').each(function(i){
alert($('tbody').find('tr:eq('+i+')').find('td:eq(1)').text())
})
Demo link http://jsfiddle.net/dhana36/YT3CD/

Appending a table to another table in the DOM. Targeting with no class or id available

I am currently attempting to append a specific , via jquery, to another table. Here's the HTML, and the two elements involved in the move.
<div id="content_area">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr><td></td></tr>
<tr>
<td></td> <-- TD needing to move -->
</tr>
</tbody>
</table> <-- Needs to move-->
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tbody>
<tr>
<td width="190" valign="top">
<table width="100%"></table>
<-- Move Above TD Here -->
</td>
</tr>
</tbody>
</table>
</div>
Although I'm hardly experienced with jquery/javascript, I have used the following method in the past to append a div to another div.
$(".target").appendTo($(".destination"));
This method I have used in the past required that the elements have some sort of unique identification. Since this is not possible with the current site I am developing (The software has locked down the HTML), how can I target these two tables in order to make the append?
You can view the issue at the following page:
http://xlevj.jyetp.servertrust.com/Pro-Audio-Equipment-s/1824.htm
It's pretty obvious to see on that page what I'm trying to accomplish with the move. Thanks for any help!
Try this:
//Find the td we want to move.
var tdToMove = $('#divWaitModal + table > tbody > tr:nth-child(2) td');
//Find the td we want to insert into after.
var tdToInsertAfter = $('#divWaitModal + table + table tr:first-child td:first-child');
//Detach the td to move.
tdToMove.detach();
//Insert it at the proper place.
tdToInsertAfter.after(tdToMove);
Just use child number of the node and target trough that :
$('body table:first-child').appendTo( $('table:eq(1) td:eq(0)') );
In words it takes the first table and it's appending it to second table > first cell. You can use :eq( number ) where number starts from 0, or first-child selector in some cases ..
This CSS might accomplish what you're after:
#content_area {
overflow: hidden;
}
#content_area table {
display: inline;
float: left;
}
If you want to target the elements, you can use the #content_area as a selector:
var $tables = $('#content_area>table');
var $table1 = $(tables[0]);
var $table2 = $(tables[1]);

Simple setting off display: none / block with javascript

I have the following Code:
<table>
<tr class="odd"><td>Entry 1</td></tr>
<tr class="even clickable" onclick="showHide('sub2')"><td>> Entry 2</td></tr>
<tr class="even" id="sub2">
<td><ul><li>Information 1</li><li>Information 2</li></ul></td>
</tr>
<tr class="odd"><td>Entry 3</td></tr>
<tr class="even"><td>Entry 4</td></tr>
</table>
and the following js:
function showHide(id) {
var el = document.getElementById(id);
if( el && el.style.display == 'none')
el.style.display = 'block';
else
el.style.display = 'none';
}
with this css:
tr.odd{
background-color: #dedede;
}
tr.even{
background-color: #7ea9ff;
}
tr.clickable{
cursor: pointer;
}
tr.clickable:hover{
color: white;
}
tr[id^="sub"]{
display: none;
}
Could someone please tell me, why it doesn't work? I'm trying to show / hide onclick the row with the id="sub2"
example in jsfiddle
Open your debug console when you run your code, and you will get the message "ReferenceError: showHide is not defined".
If you place your html and javascript inside a file and run that that particular issue is resolved. It has something to do with the order with which jsfiddle processes sources.
Secondly, you are trying to get an element by id, but give it the class name - that does not make sense. By giving elements id's and using that it works.
But this is very unwieldy, and just serves to explain why it did not work. You are better off using jQuery as raphael said.
edit: replaced html with link
function showHide(id) {
var el = document.getElementById(id);
if( el && el.style.display == 'block')
el.style.display = 'none';
else
el.style.display = 'block';
}
First of all, in your JSFiddle example, the function is wrapped into a domready event. You should change the wrap of your JavaScript to No wrap - in body. This can be set up in the second dropdown in the left bar. Your function won't be accessible otherwise.
Then, the second line in your JavaScript searches for an element with an ID - but your document does not contain any ID's, it contains classes. document.getElementById can only find elements by their IDs.
I would suggest that you use jQuery for this task. With jQuery, the task can be solved like this:
HTML:
<table>
<tr class="odd"><td>Product 1</td></tr>
<tr class="trigger"><td>> Product 2</td></tr>
<tr class="even"><td> Information 1</td></tr>
<tr class="even"><td> Information 2</td></tr>
<tr class="odd"><td>Product 3</td></tr>
<tr class="even"><td>Product 4</td></tr>
</table>
JavaScript:
$(document).ready(function() {
$(".trigger").click(function() {
$(".even").toggle();
});
});
JSFiddle
jQuery Toggle Documentation
I don't know to explain to you why this is happening, but you need to check if css display property is set to none or it is empty. So this will trigger your function from the first time, otherwise it will go to "else", and then trigger on the next click.
So you need to check the following conditions:
if( el && el.style.display === 'none' || el.style.display === '')

Categories