Detect only elements in viewport jQuery - javascript

I have the following:
<div id="btnL">Left</div>
<div id="btnR">Right</div>
<table id="tab1">
<thead>
<tr>
<td>Item</td>
<td>Price</td>
<td>Descript</td>
</tr>
</thead>
<tbody>
<tr>
<td>Entry</td>
<td>Entry</td>
<td>Entry</td>
</tr>
<tr>
<td>Entry</td>
<td>Entry</td>
<td>Entry</td>
</tr>
.
.
.
<tr>
<td>Entry</td>
<td>Entry</td>
<td>Entry</td>
</tr>
</tbody>
</table>
<script>
$("#btnR").click(function(e) {
$("#tab1 thead tr td:nth-child(n+2).css("display","table-cell");
$("#tab1 thead tr td:nth-child(-n+1).css("display","none");
});
$("#btnL").click(function(e) {
$("#tab1 thead tr td:nth-child(n+2).css("display","none");
$("#tab1 thead tr td:nth-child(-n+1).css("display","table-cell");
});
</script>
The code works as expected, hiding and showing the last element. The issue is there are 20,000 rows in the table and rendering is very slow. I would like to only affect elements in the viewport (+- a few) and as the user scrolls down change the others as opposed to change them all at once.

Assuming you want to hide a particular column. During creation of table attach a class to each td of that column (let's say class is called specialTD).
Make entry in your css like this:
table.hideCol .specialTD { display: none; }
Now whenever you need to hide/show the column, just add/remove the class on the table.
On a side note, your child selector seems incorrect to me.
-n + 1 will only mean first td.
n + 2 will mean every td starting from second.
refer http://css-tricks.com/how-nth-child-works/

Related

select and unselect td inside an HTML table

I have a table in my website that I want to be able to select one cell and the background color change, then select another cell (not in the same row) and have the first cell go back to the default color while the newly selected cell change background color. I've looked around and can only seem to find stuff that I've already got or something about a bunch of checkboxes. I have a Fiddle here.
Here's my CSS:
.selected {
background-color: rgba(0,0,0,0.4) !important;
color: #fff;
}
Here's my jquery:
<script type='text/javascript'>//<![CDATA[
$("#table2 td").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$("#table tr").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
Here's my HTML:
<body>
<table id='table'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</table>
<br><br>
<table id='table2'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</tbody>
</table>
</body>
I can get table to work fine selecting and unselecting rows, but table2 doesn't work correctly. I select a cell in one row and then select a cell in the same row and it works, but if I select a cell in another row it does not change the first cell back to the default color. The fiddle above shows what is happening.
I tried adding a <tbody>, but I don't think that I did it correctly as the results did not change.
I tried adding $('.selected').removeClass('selected'); and it partly worked. I can select a cell in one row then select a cell in another row and the background colors change correctly, but if I select the first cell a second time it does not unselect.
The way you select siblings for td is wrong, Try this
$("#table2 tbody td").click(function ()
{
$(this).closest('table').find('td').not(this).removeClass('selected');
$(this).toggleClass('selected');
});
Fiddle
It's not performing as you want in table2 because you're calling the .sibling() method, but expecting it to change elements that aren't siblings. The td's in this row:
<tr>
<td>January</td>
<td>$100</td>
</tr>
are not siblings of the ones in this row:
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
Adjust your code inside your click event to something like:
$(this).closest('table').find('td').not(this).removeClass('selected');
You can wrap your header row in <thead></thead> tags and the body rows in <tbody></tbody> tags and then use:
$("#table tbody tr, #table2 tbody tr").click(function() {
$(this).siblings().removeClass('selected').end().addBack().toggleClass('selected');
});
jsFiddle example
Create a css style for the style of your selected cell.
Then toggle that style for each situation (clicked / not clicked) and remove the 'selected' class from the rest of the cells.
CSS
.selected {
color: rgb(252, 69, 69);
}
In Jquery when cell is selected ...
$(function(){
$('body').on('click','table tr',function(e){
e.preventDefault();
$(this).toggleClass('selected').siblings().removeClass('selected');
});
});

Using Javascript, how can I show a <tr> on top of another <tr> on hover, hiding the second <tr>?

JSFiddle: http://jsfiddle.net/9u8tnh97/
I'm using jQuery and Bootstrap. I have a table with 4 <tr> elements like this:
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="hover-data">
<td>Mark</td>
<td>Otto</td>
</tr>
<tr class="hover-link hide">
<td colspan="2">Some link1</td>
</tr>
<tr class="hover-data">
<td>Larry</td>
<td>the Bird</td>
</tr>
<tr class="hover-link hide">
<td colspan="2">Some link2</td>
</tr>
</tbody>
</table>
And this is my Javascript:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().show();
$(this).hide();
} else {
$(this).prev().show();
$(this).hide();
}
});
At first, I'm hiding the two rows with class table-hover by giving them a hide class and I'm only showing the ones with class table-data.
What I want to achieve: When I hover a tr with class table-data, I want the next and immediate tr with class table-hover to show and the "hovered tr" to hide.
When I move the mouse outside again I want everything to be restored and only see the tr with class hover-data
Not sure why my code won't work. Any ideas?
This one uses mouseenter on the original rows and mouseleave on the new rows.
$('table tbody').on('mouseenter', 'tr.hover-data', function () {
$(this).next().show();
$(this).hide();
}).on('mouseleave', 'tr.hover-link', function () {
$(this).prev().show();).hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/9u8tnh97/15/
I noticed that the bootstrap hide class is a little too "strong" and overrides show() so I also changed those to style="display: none" for now. Instead use your own class e.g. hideme in the following example: http://jsfiddle.net/TrueBlueAussie/9u8tnh97/17/
I am using delegated events (out of habit, and so they can share a common selector), but two separate "normal" (static) selectors will likely work just fine too. e.g. http://jsfiddle.net/TrueBlueAussie/9u8tnh97/16/
Like this:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().toggleClass('hidden');
}
});
https://jsfiddle.net/gqyrpnes/

Jquery select tbody but not from nested tables

I am trying to append data to a table, that gets selected using jquery. The problem is, this table may have nested tables within it. What happens is that when I append the data, not just the parent table's tbody gets appended but so too does all the children tables tbody. Here is my code:
var template = window.app.getTemplate('myTemplate');
var image = {id: imageId, name: imageName, imageList: imageTypes, extension: ext, thumbNail: thumbNailPath};
$("#MyTable tbody:first").append(template(image));
Where myTemplate is set up like this:
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<tr>
</tr>
<td></td>
</tr>
and MyTable is set up like this:
<table id="MyTable" data-attr="images">
<thead>
</thead>
<tbody>
</tbody>
</table>
Like I said, when the append happens, if there is more than one table within tbody, all tbody's get appended to. So, how do I select only the first?
thanks
JQuery uses the CSS selectors to reach the element.
$("#MyTable > tbody:first")
E > F Matches any F element that is a child of an element E.
See more at http://www.w3.org/TR/CSS2/selector.html#child-selectors
Maybe if you update your jquery selector
$("#MyTable > tbody:first")
Try:
$("#MyTable > tbody").append(template(image));

Table row hover, background change and click but have some child cells in the row have different properties

<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('go.html');">
<td>1</td>
<td>John/td>
<td>Dump</td>
</tr>
</table>
Javascript:
function ChangeColor(tableRow, highLight)
{if (highLight)
{tableRow.style.backgroundColor = '#F5FFDB';}
else
{tableRow.style.backgroundColor = '';}}
function DoNav(theUrl)
{document.location.href = theUrl;}
I use the following structure to draw the table. When I hover on a row it changes the background and anywhere I click on the row it will jump to the url. What I'm trying to do is have some id identifier (that maybe goes into <td>) which basically tells certain columns in a row to behave differently. Namely this is what I'm looking for:
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td id="hover_go_style_1">1</td>
<td id="hover_go_style_1">John</td>
<td id="hover_go_style_2">Dump</td>
</tr>
</table>
Any ideas?
EDIT:
I forgot to mention... the id="hover_go_style_1" would take me to one url and id="hover_go_style_2" would take me to another url. That's the "difference". As it is now with onClick the whole row takes me to one url, but in essence im trying to isolate cells. Not sure how to explain this better.
You should be using CSS for your hover color, it's much simpler there. Your click event can be much nicer hooked up and handled completely in your JavaScript also. I've added a data-url (HTML5-compatible) attribute to your row to define the URL.
jsFiddle
HTML
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr data-url="go.html">
<td>1</td>
<td>John</td>
<td>Dump</td>
</tr>
</table>
JS
$('tr[data-url]').click(function () {
window.location.href = $(this).attr('data-url');
});
CSS
tr:hover td {
background-color:#F5FFDB;
}
/* Style the third column differently */
tr:hover td:nth-child(3) {
background-color:#F00;
}

Check a table row cell for contents

I want to use jQuery to check if the 2nd cell in each table row of a table contains any text, if the 2nd cell doesn't contain any text then set the table row to display: none;
Whats the best way to go about this?
HTML:
<table id="results">
<tr>
<td>Results</td>
<td>1000</td>
</tr>
<tr>
<td>Description</td>
<td></td> <!-- This cell is empty so hide row -->
</tr>
<tr>
<td>Time/Date</td>
<td>14:03 22/01/12</td>
</tr>
</table>
Have a look at the :empty selector:
$('table tr').has('td:empty:nth-child(2)').hide()
$('table tr').each(function() {
if(!$(this).find('td').eq(1).html().length) {
$(this).hide();
}
});
This will loop through each tr, find the second element using $.eq(1) (arrays start from zero) and see if it contains anything using $.html().length. If it's empty, it hides the tr with $(this).hide().
a simple solution, make use of :empty selector
$("#results tr").find('td:eq(1):empty').parent().hide();
fiddle : http://jsfiddle.net/GHg7f/2/

Categories