Hide second and third row of table - javascript

<div class="NewsResultsList">
<table>
<tr>
<td>
Results:<br/>
First<br/>
Second
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>No Results</td>
</tr>
</table>
</div>
I need to hide the second row and the third row.
$('div.NewsResultsList table tr:eq(1)').hide();
$('div.NewsResultsList table tr:eq(2)').hide();
That didn't do it? What is wrong?


Here are a couple of ways to do it:
jsBin demo
$('.NewsResultList tr:gt(0)').hide();
$('.NewsResultList tr').slice(-2).hide();
$('.NewsResultList tr').not(':eq(0)').hide();
$('.NewsResultList tr td:contains("No")').parent('tr').hide();
$('.NewsResultList tr').not(':first').hide();
$('.NewsResultList tr').eq(-1).hide().end().eq(-2).hide();
$('.NewsResultList tr:last').prev().andSelf().hide();


Use this Script:
<script type="text/javascript">
$(document).ready(function (e) {
$('.NewsResultsList tr:eq(1)').hide();
$('.NewsResultsList tr:eq(2)').hide();
});
</script>


You spelled NewsResultList wrong in your jQuery call. ("NewsResultsList")... ;)


You have wrong selctors to get to that table rows:
It should actually be
$('div table tr:eq(1)').hide();
$('div table tr:eq(2)').hide();
DEMO


Two issues:
You have NewsResultsList in your selector, but the class is NewsResultList. The two don't match.
And, you are missing a </td> in the table.
Fix those two issues and it works here: http://jsfiddle.net/jfriend00/pfemk/


Try this for in your html/PHP:
<table>
<tr>
<td>
Results:<br/>
First<br/>
Second
</td>
</tr>
<tr class="hideMe">
<td> </td>
<td></td>
</tr>
<tr class="hideMe">
<td>No Results</td>
</tr>
</table>
</div>
and this in your jQuery/javascript:
$('#something').click( function() {
$('.hideMe').hide();
});

Related

How to get first value of row in table on click?

I have one table with first numeric column:
<table id="toppings" border="1" cellpadding="2">
<tr id="id1">
<td>3</td>
<td>row12</td>
<td>row13</td>
</tr>
<tr id="id2">
<td>12</td>
<td>row22</td>
<td>row23</td>
</tr>
<tr id="id3">
<td>15</td>
<td>row32</td>
<td>row33</td>
</tr>
<tr id="id4">
<td>22</td>
<td>row42</td>
<td>row43</td>
</tr>
<tr id="id5">
<td>23</td>
<td>row52</td>
<td>row53</td>
</tr>
<tr id="id6">
<td>55</td>
<td>row62</td>
<td>row63</td>
</tr>
</table>
How can I get first value/column of row on clicking row.
I found following example doing the same.
http://www.vbforums.com/showthread.php?522104-HTML-table-on-click-event
But I don't want to add event to each row manually as my table is having billions of records. Please help me. How can I get the row value (first column) on clicking row?

$("#toppings tr").click(function(){
alert( $(this).children().closest("td").html());
});
fiddle:
http://jsfiddle.net/k1ezbcrk/

example for one row could be
<tr id="id2">
<td>12</td>
<td>row22</td>
<td>row23</td>
</tr>
<script>
function getColumnValue(elem){
alert(elem.innerHTML);
}
</script>

$("#toppings tr").click(function(){
alert( $(this).children().first().html());
});

You could use event delegation
var table = document.getElementsByTagName('table')[0];
function getValue(){
console.log(event.target.parentElement.firstElementChild.innerText);
}
table.addEventListener('click', getValue, false);

Swap table rows using javascript

Am trying to do like this,
<table>
<tr id="ID1"><td></td></tr>
<tr id="ID2"><td></td></tr>
</table>
I need to swap table rows index position like as follows
<table>
<tr id="ID2"><td></td></tr>
<tr id="ID1"><td></td></tr>
</table>
I tried to fix it using jQuery as:
$('#ID1').after('#ID2');
Can anyone help me to fix the above requirement using javascript?
$('#ID1').after('#ID2');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id="ID1">
<td></td>
</tr>
<tr id="ID2">
<td></td>
</tr>
</table>

after() is used to insert content. To move or add elements, use insertAfter():
$('#ID1').insertAfter('#ID2');
Example fiddle

Swap row by appendChild.
var x = document.getElementById("first");
var table = document.getElementById("table");
table.appendChild(x);
<table id="table">
<tr id="first"><td>First</td></tr>
<tr id="second"><td>Second</td></tr>
</table>

Adding multiple attributes to Javascript/Jquery

I'm currently working on a set of tables and i've gotten them to expand and contract at the click of a button. I'm having problems however to create a button that expands all the tables at the same time. Please see my code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> <!--this first part is easy to implement-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$('.vis'+$(this).attr('vistoggle')).toggle();
});
});
</script>
</head>
<body>
Expand all <!--vistoggle needs to have values 1 and 2 in it-->
<table>
<tr>
<td>safeaef</td>
<td>asdfaef</td>
<td>asfead</td>
<td>Expand</td>
</tr>
<tr class="vis1" style="display:none">
<td>asdfae</td>
<td>zxcvry</td>
<td>rteyertr</td>
<td></td>
</tr>
<tr class='vis1' style='display:none'>
<td>tsersg</td>
<td>sdgfs</td>
<td>wregssdf</td>
<td></td>
</tr>
<tr class="vis1" style="display:none">
<td>sdfgrs</td>
<td>sgdfgsr</td>
<td>Cewret</td>
<td></td>
</tr>
</table>
<table>
<tr>
<td>cfasdfas</td>
<td>1adfaed</td>
<td>asdfasdfea</td>
<td>Expand</td>
</tr>
<tr class="vis2" style="display:none">
<td>asdfaefas</td>
<td>1asdf</td>
<td>Cisdfae</td>
<td>22fasdew</td>
</tr>
<tr class="vis2" style="display:none">
<td>asdfaef</td>
<td>1sefa0</td>
<td>Ciasdf 2</td>
<td></td>
</tr>
</table>
</body>
</html>

You could try building a selector like this:
$('tr[class^="vis"]')
it would select all elements, which class attributes begins with 'vis'.
But from what I see you want the first row to always stay visible, so I would propose to simply separate the table header and it's body like this:
<table>
<thead><tr>...</tr></thead>
<tbody id="table-one" class="vis">
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
<table>
<thead><tr>...</tr></thead>
<tbody id="table-two" class="vis">
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
and then you could use a simple:
$('tbody.vis').toggle();
to toggle all the tables, and for toggle`ing just one of them you can use:
$('tbody#tbody-one').toggle();
which is probably much better idea for performance reasons (ID is found much faster than classes).
The ID attribute of TBODY can be stored just like you store it right now (in a button's attribute).
Fiddle example:
http://jsfiddle.net/SL4UZ/3/
Edit
To make your HTML valid, you should use data-attributes or bind your events using javascript instead of simply adding customs attributes inside your button tags. For example:
<button data-toggle-id="tbody-one">Toggle</button>
I updated my fiddle.

You can check the attr that needs to be toggled and if it matches all open 1 and 2, this works if your table is not dynamic
Expand all
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
if($(this).attr('vistoggle') == "all"){
$('.vis1').toggle();
$('.vis2').toggle();
}else{
$('.vis'+$(this).attr('vistoggle')).toggle();
}
});
});
Fiddle : http://jsfiddle.net/6hpbq/

Separate your classes eg vis1 becomes vis one (two classes) Then do a conditional check on the value of the data attribute. If its set to all, toggle all elements with the class vis, else toggle the specific ones:
<script>
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
var vistog = $(this).attr('vistoggle');
if(vistog == 'all'){
$('.vis').toggle();
}else{
$('.vis.' + vistog).toggle();
}
});
});
</script>
</head>
<body>
Expand all <!--vistoggle set to all -->
<table>
<tr>
<td>safeaef</td>
<td>asdfaef</td>
<td>asfead</td>
<td>Expand</td>
</tr>
<tr class="vis one" style="display:none">
<td>asdfae</td>
<td>zxcvry</td>
<td>rteyertr</td>
<td></td>
</tr>
<tr class='vis one' style='display:none'>
<td>tsersg</td>
<td>sdgfs</td>
<td>wregssdf</td>
<td></td>
</tr>
<tr class="vis one" style="display:none">
<td>sdfgrs</td>
<td>sgdfgsr</td>
<td>Cewret</td>
<td></td>
</tr>
</table>
<table>
<tr>
<td>cfasdfas</td>
<td>1adfaed</td>
<td>asdfasdfea</td>
<td>Expand</td>
</tr>
<tr class="vis two" style="display:none">
<td>asdfaefas</td>
<td>1asdf</td>
<td>Cisdfae</td>
<td>22fasdew</td>
</tr>
<tr class="vis two" style="display:none">
<td>asdfaef</td>
<td>1sefa0</td>
<td>Ciasdf 2</td>
<td></td>
</tr>
</table>
</body>
</html>

Checkboxes hide groups of rows from a table

I have a table that I would like to dynamically hide/reveal rows in, based on checkboxes at the top.
I would like to do this without jQuery, just vanilla Javascript.
I have seen numerous methods on this site and others, but always snippets of code,not complete working examples.
I don't want to give each row a separate div name, or whatever, I am assuming there is a way I can do this with a common class for the 3 types of rows I want to hide/reveal.
Can anyone please show me a working example which allows checkboxes to hide/show multiple rows from a table with vanilla Javascript?

Given HTML like the following:
<table>
<thead>
<tr>
<td>
<label>
<input type="checkbox" class="show" value="north" checked />North</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" class="show" value="south" checked />South
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" class="show" value="outOfArea" checked />Out of area
</label>
</td>
</tr>
</thead>
<tbody>
<tr class="north">
<td>North One</td>
</tr>
<tr class="north">
<td>North Two</td>
</tr>
<tr class="outOfArea">
<td>Out-of-area One</td>
</tr>
<tr class="south">
<td>South One</td>
</tr>
<tr class="south">
<td>South Two</td>
</tr>
<tr class="north">
<td>North Three</td>
</tr>
<tr class="north">
<td>North Four</td>
</tr>
<tr class="south">
<td>South Three</td>
</tr>
<tr class="outOfArea">
<td>Out-of-area Two</td>
</tr>
</tbody>
</table>
The following jQuery seems to do as you seem to describe:
$('thead input[type=checkbox]').change(function(){
var self = this;
$(self).closest('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});
JS Fiddle demo.
As it seems that you'd prefer a plain-JavaScript approach, I'd suggest the following (to work on the same HTML as posted above):
function toggle (e) {
var self = e.target,
toggleClass = '.' + self.value,
toToggle = document.querySelectorAll(toggleClass);
for (var i = 0, len = toToggle.length; i < len; i++) {
toToggle[i].style.display = self.checked ? 'table-row' : 'none';
}
}
var thead = document.querySelector('thead');
thead.addEventListener('change', toggle);
JS Fiddle demo.
References:
jQuery:
Attribute-equals ([attribute="value"]) selector.
change().
closest().
find().
filter().
toggle().
Plain JavaScript:
document.querySelector().
document.querySelectorAll().
EventTarget.addEventListener().

Looks like you are describing something along the lines of this example

fetch HTML Element object using javascript, mootools

Please check my HTML below:
<table cellpadding="0" cellpadding="0" border="0">
<tr>
<td>
<div class="toogler">Demo1</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo1 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo1</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo1 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo2</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo2 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo3</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo3 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo4</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo4 Content</div>
</td>
</tr>
</table>
Here is my JS Code:
<script type="text/javascript" language="javascript">
$$('.toogler').each(function(e){
alert(e);
// this will alert all the toogler div object
});
</script>
my problem is that how can i fetch the object of the next div with class element
if i have object of the first toogler then how can i get the object of the next first div which class 'element'
I don't want to give the ids to the elements

if you can't alter the html output and refactor as suggested by oskar (best case), this works:
e.getParent().getParent().getNext().getFirst().getFirst() - it will return you the next div but it's slow.
unfortunately, tables break .getNext("div.element") as it's not a sibling.
another way that works is this (if their lengths match) - it will be MUCH faster if the reference is put in element storage as a 1-off:
var tooglers = $$("div.toogler"), elements = $$("div.element");
tooglers.each(function(el, i) {
console.log(elements[i]);
el.store("contentEl", elements[i]);
});
i don't like either solution though, not maintainable / scalable enough.

You shall have to iterate through and check for the class one by one.

The easiest way of assigning a toggler to the toggled element:
$$('.toogler').each(function(e, index){
console.log($$('.element')[index]);
});
Here's a working example: http://jsfiddle.net/oskar/aTaBB
Also, get rid of the table.

Try using Element.getNext([match]).
<script type="text/javascript" language="javascript">
$$('.toogler').each(function(e){
alert(e);
// Get the next sibling with class element.
var nextElement = e.getNext('.element');
alert(nextElement);
});
</script>

Categories