Develop Reference

Identify element using multiple classes in random arrangement [duplicate]

This question already has answers here:
How can I select an element with multiple classes in jQuery?
(14 answers)
Closed 4 years ago.
Is there a way to get the element using its classes not knowing the arrangement of classes?
I have here a sample HTML
<table>
<tr class="header first test1">
<th>Month</th>
<th>Savings</th>
</tr>
<tr class="header first test2">
<td>January</td>
<td>$100</td>
</tr>
<tr class="h34der third test1">
<td>February</td>
<td>$80</td>
</tr>
</table>
I need to get the element that has header and test1 as its classes
Options I did was the following:
Option #1
$('.header, .test1').css('background','yellow');
However it is incorrect as it color all the elements that has "header" or "test1" class.
Option #2
I saw that this is possible
$("[class*='header first test1']").css('background','yellow');
But my scenario was I do not know the class "first" and the only classes I know are "header" and "test1".
Is there a way to identify the element using multiple classes?
Appreciate your help with this.
Here is my fiddle I used for testing: http://jsfiddle.net/ky8d94n6/

Use $('.header.test1') to select element will class header and test1:
$(document).ready(function(){
$('.header.test1').css('background','yellow');
});
$(document).ready(function(){
$('.header.test1').css('background','yellow');
});
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="header first test1">
<th>Month</th>
<th>Savings</th>
</tr>
<tr class="header first test2">
<td>January</td>
<td>$100</td>
</tr>
<tr class="h34der third test1">
<td>February</td>
<td>$80</td>
</tr>
</table>

How to get first td tag innerText after specific class

I have this kind of Html and i want to get first <td> class, how can i do it?
<div class="className">My Class</div>
<table>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 1</td>
</tr>
</tbody>
</table>
</div>
First of all i get the class
var Myclass = document.getElementsByClassName('className')[0];
Bu then i cannot figure out how should i navigate to td value.

If you want to stick to pure vanilla js, the simplest answer would probably be:
document.querySelector('.className td').innerHTML;
This is assuming your HTML is structured like below. It's kinda unclear since you have two closing div tags:
<div class="className">My Class
<table>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 1</td>
</tr>
</tbody>
</table>
</div>

ng-repeat in table and conditional tr

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.

How to make text appear in a set position on page when an image is hovered over

I've read through similar answers and cant figure out how to edit them to work with my own html. I have a table, and once the mouse hovers over a certain cell in the table text will appear in a white box to the right of the page. If anyone knows how to go about this using Javascript preferably (but anything that works will help) to get this to work that would be great. Here is a snippet of my code for the table, the cell I want to carry out the said event has a ID="blue1".
<tr>
<td>1</td>
<td id="blue1">
2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
here is the box I want the text to appear:
<div id="whitebox">
<script type= text/javascript>
</script>
</div>
This is the text I want to appear in #whitebox once #blue1 is hovered over -
" 2nd Meet John at 2 "
I Have fiddled around with various codes and can't get it to work.

You have to catch .hover() event and append text with .text().
$('#blue1').hover(function() {
$('#whitebox').text('2nd Meet John at 2');
}, function() {
$('#whitebox').text('whitebox');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td id="blue1">
2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
<div id="whitebox">
whitebox
</div>
Script could be placed in <head> ... </head> section of site using:
<script type="text/javascript">
$(document).ready(function() {
// script
});
</script>

HTML / CSS: Same table-cell width across rows

I have this table that includes details about its items on the right and I need to have all the cells in a column of the exact same width as the longest one, just like in the screenshot below:
This works if I use a regular table, but now I need to add an accordion function on top of it, so when I click on a row, the row's associated content will slide down from under each one.
The only way to add those content divs between table rows is to wrap them in <tr> tags, which don't work with the slideDown() and slideUp() effects.
Now I recreated the table in a fiddle using <dl> tags, hoping to solve this using CSS somehow, but no such luck. Here's the link: http://jsfiddle.net/bbDYX/ - everything is working properly, except for the width issue.
The only solution I can think of now is going through each table-cell on each of the right hand columns with JavaScript and setting their width to the same value as the highest width cell. But I want to avoid that if I can.
Any ideas?

This is what you need: myjsfiddle
css:
.con1
{
width:100%;
height:50px;
background-color:#F3E2A9;
}
Html:
<table border='0' cellspacing='3' width='100%'>
<tr bgcolor='lightblue'>
<td><a href='#' class='open1' >Item</a></td>
<td>detail 1</td>
<td>detail 2</td>
<td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
<tr bgcolor='lightblue'>
<td><a href='#' class='open1' >Item</a></td>
<td>detail 1</td>
<td>detail 2</td>
<td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
<tr bgcolor='lightblue'>
<td><a href='#' class='open1' >Item</a></td>
<td>detail 1</td>
<td>detail 2</td>
<td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
</table>
Script:
$('.con1').hide();
$('.open1').click(function() {
$(this).parent().parent().next().find('.con1').slideToggle();
return false;
});
have fun styling it...
(tested)

You can't slide up the <tr> tag, but you can slide up the <td> tags. Not sure if this would work for you, but worth considering...
$("#somerow").find("td").slideToggle();

Ok, as I stated in a comment, I would keep the table and create a "custom widget" for the accordion-like effect.
The thing would be very simple, using jQuery UI animations etc.
For example, you can create a basic "description toggle" with just four lines of code:
$('.mytable .description').hide();
$('.mytable').on('click', '.title', function(){
$(this).next('.description').toggle();
});
(of course then you can customize the .toggle() by adding effect type, duration, ...)
Here it is a working example: http://jsfiddle.net/JAmFh/