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>
Related
I am trying to use javascript to hide a table if there is no data present. I am using Powershell to grab data from a spreadsheet; however, if there is no data in the spreadsheet the table is not required.
In a nutshell, if the td with an id of "hide if empty" does not contain any data can the div with div with id "sampleDIV" or the table with id "Tabletest" not be visible?
Is this possible?
Thank you :)
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hide if empty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
Am I doing something really silly?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script language ="javascript">
if (document.getElementById("hideifempty").innerHTML === "") {
document.getElementById("SampleDIV").style.display = "none";
}
</script>
</head>
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hideifempty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>If you can see this it didn't hide</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<body>
</body>
</html>
if (document.getElementById("hideifempty").innerHTML === "") {
document.getElementById("SampleDIV").style.display = "none";
}
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hideifempty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>If you can see this it didn't hide</td>
<td></td>
</tr>
</tbody>
</table>
</div>
You may want to use .innerHTML.trim() === "" - up to you depending on whether you define an element with nothing but whitespace as "empty".
Note: Element IDs are not supposed to contain spaces (although that may work in some browsers), so I've changed the id to "hideifempty".
EDIT: Note that the above JS would need to be in a <script> element that is after the <div> in question, so e.g., you could follow the reasonably standard practice of putting scripts immediately before the closing </body> tag. Or you could wrap the above if statement in an onload or DOMContentLoaded handler. Otherwise the JS will run before the browser has parsed the div and table.
you try:
$('#TableTest tr').each(function() {
if ($(this).find('td:empty').length) $(this).hide();
});
or you can use css:
tr td:empty {
visibility: hidden;
height: 0;
}
td:not(:empty) ~ td:empty{
visibility: visible;
height: 100%;
}
Yes it is and here is how you can do that
if(document.querySelector("#hideIfEmpty").innerHTML.trim() == ""){
document.querySelector("#SampleDIV").style.display = "none";
}
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hideIfEmpty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
You should probably add some checks to make sure the elements with the IDs hideIfEmpty and SampleDIV exist to prevent errors. Also, an element's ID can't contain spaces, that is why I've changed hide if empty to hideIfEmpty.
I need to show/hide tr tag of a table as per the scope value in the controller. I have written the code as shown below but class="ng-hide" gets appended everytime with tr tag automatically though I have declared my ng-show with correct syntax.
<div ng-show="IsParentExist">
<table>
<thead>...</thead>
<tbody>
<tr ng-show="noValueExist">
<span>There are no records to show here..</span>
</tr>
<tr ng-repeat....>
<td> </td>
</tr>
</tbody>
</table>
</div>
Here is a problem when it gets rendered in DOM as below
<div ng-show="IsParentExist">
<span>There are no records to show here..</span>
<table>
<thead>...</thead>
<tbody>
<tr class="ng-hide" ng-show="noValueExist">
</tr>
<tr ng-repeat....>
<td> </td>
</tr>
</tbody>
</table>
</div>
I have assigned the scope variable in controller as below
$scope.noValueExist = true;
Until you set the value of noValueExist as true in controller, angular sets the class as ng-hide by default.Add this line in controller.
$scope.noValueExist = true;
Try replacing ng-show="noValueExist" by ng-hide="!noValueExist"
<tbody>
<tr ng-hide="!noValueExist">
<td>There are no records to show here.</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
In your controller, initialize your value.
$scope.noValueExist = false;
And when you need to show your <tr> element set this value to true.
$scope.noValueExist = true;
I hope this will help you.
As user #cst1992 mentioned the issue was with span was not wrapped in .
The span is getting misplaced because it is not supported inside 'tr' tag.
You need to use 'td' tag to show content inside table.
After replacing 'span' with 'td' tag,it gets rendered in DOM as below.
<div ng-show="IsParentExist" class="ng-hide">
<table>
<thead>
<tr><th>a</th>
<th>b</th>
</tr></thead>
<tbody>
<tr ng-show="noValueExist" class="ng-hide">
<td>There are no records to show here.</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
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>
<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();
});
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>