Could someone please explain to me why
$(".transaction_history_tab").hide();
will not hide both
// Container
<tbody class="transaction_history_tab">
</tbody>
// In example this is inside the transaction_history_tab container
<div class="data-info-box">
<span>NO DATA TO SHOW</span>
</div>
After hiding transaction_history_tab the "NO DATA TO SHOW" still appears.
$(".transaction_history_tab").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// Without table tags around
<tbody class="transaction_history_tab">
<div class="data-info-box">
<span>NO DATA TO SHOW</span>
</div>
</tbody>
Working with the answer from Rory
$(".transaction_history_tab").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// With table tags around
<table>
<thead>
<tr>
<td></td>
</tr>
</thead>
<tbody class="transaction_history_tab">
<tr>
<td>
<div class="data-info-box">
<span>NO DATA TO SHOW</span>
</div>
</td>
</tr>
</tbody>
</table>
The issue is solely caused by invalid HTML. The tbody element must be contained within a table. As yours is not, it isn't rendered. You can see this if you check the DOM in the inspector. The tbody can only contain tr elements too. The child div is therefore also a problem, it should be wrapped in a tr and then a td.
As the tbody element is not rendered, and the .transaction_history_tab doesn't exist, hence there's nothing to hide.
To fix the issue correct your HTML. Either add a table around the tbody, including a tr and td around the div, or remove the tbody completely.
$(".transaction_history_tab").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>This will be shown...</td>
</tr>
</thead>
<tbody class="transaction_history_tab">
<tr>
<td>
<div class="data-info-box">
<span>NO DATA TO SHOW</span>
</div>
</td>
</tr>
</tbody>
</table>
Maybe because structure tbody>div without a table/rows/cells is not a valid HTML structure.
Try either using a table>tbody>tr>td>div structure as in this JSFiddle https://jsfiddle.net/u58460ot
or use just the div without tbody as parent
<table>
<tbody class="transaction_history_tab">
<tr>
<td>
<div class="data-info-box">
<span>NO DATA TO SHOW</span>
</div>
</td>
</tr>
</tbody>
</table>
try like above it will work...
You haven't included your css here, but it is possible that your css includes something like this:
.data-info-box {
visibility: visible;
}
which would need changing to:
.data-info-box {
visibility: inherit;
}
This is because a child element set to 'visible' will still show up, even if their parent is 'hidden'. Setting the visibility to 'inherit' means that the child will take on whatever visibility attribute the parent has.
'Inherit' is the default setting for visibility, so if this is the problem you would have had to manually set it to 'visible' in your css (or dynamically in your js).
Related
I have found multiple ways to link an entire table row to another page with jQuery. But every solution I've tried for this does not work with anchors which point to a div that triggers a fancybox.
I have the following HTML
<tbody class="result" data-href="#details1">
<tr>
<td rowspan="2" class="resultlogo">
<img class="resultlogoimg" src="images/logos/logo-orshop.png">
</td>
<td class="resulthead">
<h1><a class="detaillink" href="#details1">Orshop</a></h1>
</td>
<td rowspan="2" class="resultprice">
<h1>€ 69.00</h1></td><td rowspan="2" class="resultrating">
<span class="markbg"><h1>8,3</h1></span>
</td>
</tr>
<tr>
<td class="resultpc"><h2>3074ES, Rotterdam</h2></td>
</tr>
</tbody>
With the following jQuery to trigger the click event:
$(".result").click(function() {
window.document.location = $(this).data("href");
});
The <tbody> tag wraps 2 table rows because of the way a result row is layed out. I want to show div contents in a fancybox based on the user clicking a row (or tbody tag).
Is it not possible to use data-href with anchors?
If you are going to wrap the 2 table rows, set you data attributes in the <table> tag, and not in the <tbody> tag.
Then you only need a simple fancybox initialization script like:
$(".result").fancybox();
And use the fancybox's special data attributes to set the href and the type of content like
<table class="result" data-fancybox-type="inline" data-fancybox-href="#details1">...</table>
See JSFIDDLE
I'm trying to find a way to alert the contents of a p tag without a class, name or an id. It is a child of a tag named 'question' so I thought I could just next into it. There are 2 p tags under the parent tag, the one Im looking for is 2nd. When I run this it returns null. I can't figure out why because I'm new to JQuery, thanks for the help.
alert($('#question').find('p').first().next().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
Your javascript is fine. The problem is with your HTML. You probably forgot to wrap it inside a table and a tr:
alert($('#question').find('p').first().next().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
</tr>
</table>
Your code from the question doesn't work since when <td> is without <table> and <tr> then it gets rendered like there was not <td>:
<p>First</p>
<p>This is the one I want</p>
see here
The problem is that markup is invalid. You can't have td element by itself without table and tr elements. So what happens, is that browser fixes broken markup by removing orphan td tag.
It will work if you make HTML valid:
alert($('#question').find('p').first().next().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
</tr>
</table>
When you check the code in the inspector you can see that as table and tr tags are not present then your td tag is not present either and the $('#question') returns null. Just add them.
alert($('#question').find('p').first().next().text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
</tr>
</table>
I have a collection of elements of different types. I want to iterate them using ng-repeat, and conditionally draw the right tr per each type.
I can't use ng-repeat-start since I want to use virtual scrolling and none of the libraries I found supports the start/end concept.
Here is a jsfiddle: http://jsfiddle.net/mx6v8j98/1/, which doesn't work. here is the HTML part:
<div ng-app ng-controller="MyCtrl">
<table>
<tbody>
<tr ng-repeat="item in itemsList" ng-switch="$even" ng-class-even="'even'" ng-class-odd="'odd'">
<div ng-switch-when="true">
<td>{{item}} is even</td>
<td>even content</td>
</div>
<div ng-switch-default>
<td>{{item}} is odd</td>
<td>odd content</td>
</div>
</tr>
</tbody>
</table>
</div>
In my real world case, I have many td with complex content, so I don't want to use ng-if/ng-switch-when on each
Update: I can put the ng-repeat on the <tbody> tag, but that looks ugly and I'm not sure what the consequences are regarding styling
Update II: In my case, the 'tr' tag itself is rendered differently according to a condition
As stated in another answer, <div> is not allowed as a child element of <tr>.
You are clearly trying to use <div> as a logical container for ng-switch-when, but since ng-switch-when (and ng-switch-default) supports multi-element, you don't need this container:
<tr ng-repeat="item in items" ng-switch="$even">
<td ng-switch-when-start="true">{{item}} is even</td>
<td>even content 1</td>
<td>even content 2</td>
<td ng-switch-when-end>even content last</td>
<td ng-switch-default-start>{{item}} is odd</td>
<td>odd content 1</td>
<td>odd content 2</td>
<td ng-switch-default-end>odd content last</td>
</tr>
It seems you cannot put <DIV> within <TR> but before <TD>.
Solution 1: Put conditional expression in every <TD>.
<!-- TDs for even row -->
<td ng-if="$even">{{item}} is even</td>
<td ng-if="$even">even content</td>
<!-- TDs for odd row -->
<td ng-if="!$even">{{item}} is odd</td>
<td ng-if="!$even">odd content</td>
Solution 2: For fairly complex table structure, you'd consider create your own directive to represent row cells.
I have the following data structure: a list of courses, and for every course, a list of semesters. I need to build a table with a row for every semester of every course, and a column with the course's name which spans all the rows for that course.
I'm trying to use angular to generate the table, but because the data structure is nested I can't simply do ng-repeat in the tr tag. So I tried doing this:
<table border="1">
<div ng-repeat="course in data">
<tr>
<td rowspan="{{course.semesters.length}}">{{course.name}}/td>
</tr>
<tr ng-repeat="semester in course.semesters">
<td>{{semester.info}}</td>
</tr>
</div>
</table>
This utterly fails - the table is generated outside the repeated div. Seems to me I'm missing something basic about how ng-repeat works.
Try tbody instead of div:
<table border="1">
<tbody ng-repeat="course in data">
<tr>
<td rowspan="{{course.semesters.length}}">{{course.name}}/td>
</tr>
<tr ng-repeat="semester in course.semesters">
<td>{{semester.info}}</td>
</tr>
</tbody>
</table>
What is the proper syntax for changing the table cell background color of every-other div?
Code example:
<table>
<div id="alternator">
<tr>
//stuff here
</tr>
<tbody>
<tr>
<td>
<table>
//stuff here
</table>
</td>
</tr>
</tbody>
</div>
</table>
To explain, I have a part of my table wrapped in a Div with the id of ALTERNATOR
For every other ALTERNATOR that appears on the page, I want to change the background color of the table cells inside
Something like:
(#Alternator:odd).AllTableCellsInside().attr(background-color, "grey")
Looks like the perfect use case for the :odd selector: http://api.jquery.com/odd-selector/
$('#alternator tr:odd').css('background-color', 'grey');