Identify element using multiple classes in random arrangement [duplicate] - javascript

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>

Related

Use CSS classes to style Kendo Editor template

I want to be able to add classes to HTML elements within a Kendo template and then apply styling to them using CSS.
<style>
.foo {
color: red;
}
</style>
<table class="table template">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td class="foo">Foo</td>
<td>Bar</td>
<td>Baz</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<textarea id="myKendoEditor"></textarea>
<script>
let template = $(".template").get(0).outerHTML;
$("#myKendoEditor").data("kendoEditor").value(template);
</script>
This doesn't work, I guess because the markup within the template is not part of the DOM at the point where CSS get applied.
Is there any way to do this? The only success I've had is adding style attributes to the elements within the template but this is really nasty as I want to keep the style separate from the template.

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.

datatables for jquery 2.1.1 to make table header as dropdown

I have a simple table like
<table>
<thead>
<tr><th>A</th><th>B</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a1</td><td>b1</td><td>c1</td></tr>
<tr><td>a2</td><td>b2</td><td>c2</td></tr>
</tbody>
</table>
I actually wanted the thead columns to behave like buttons for sorting table ascending or descending order-wise.
I found an option of using datatables plug-in which works like this.
But I am using jquery 2.1.1 and the above plug-in isn't available for this version.
I am bit confused of how to proceed further to make such implementation with my code.
Any help will be appreciated!
"Stupid jQuery Table Sort" seems to fully support jquery 2+.
JSbin demo: http://jsbin.com/wimefeseni/1/edit?html,output
JS:
$(function(){
$("table").stupidtable();
});
HTML:
<table>
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-.18</td>
<td>banana</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
</tbody>
Link to plugin: http://joequery.github.io/Stupid-Table-Plugin/

Align a button to a table with css

I am trying to get these buttons to be even with my table, but it isn't working very well, they just sit at the bottom. For simplicity the styles are inline and the table is static (in reality this table is being dynamically populated with images).
<button id="lftArrow">«</button>
<table style="display:inline-table;border:0px;height:120px;">
<tr id="pictureSetDisplay" name="pictureSetDisplay">
<td>some picture</td>
<td>some picture</td>
</tr>
</table>
<button id="rgtArrow">»</button>
Any ideas what type of style I should apply to the buttons to get them to be sitting in the vertical middle of the table?
You can place the buttons as well inside a table - an outer table. But yes, this will involve one more table.
Check the fiddle: http://jsfiddle.net/FYV3m/3/
<table border="1"><tr>
<td valign="middle">
<button id="lftArrow" style="height:120px">«</button>
</td><td valign="middle">
<table style="display:inline-table;border:0px;height:120px;">
<tr id="pictureSetDisplay" name="pictureSetDisplay">
<td>some picture</td>
<td>some picture</td>
</tr>
</table>
</td><td valign="middle">
<button id="rgtArrow" style="height: 120px">»</button>
</td>
</tr></table>
You can remove the height style from the button (or CSS) as needed.
Set vertical-align: middle on the table itself, like shown in here: http://jsfiddle.net/hBZDT/1/
<button id="lftArrow">«</button>
<table style="vertical-align: middle; display:inline-table;border:solid 1px;height:120px;">
<tr id="pictureSetDisplay" name="pictureSetDisplay">
<td>some picture</td>
<td>some picture</td>
<td>some picture</td>
<td>some picture</td>
</tr>
</table>
<button id="rgtArrow">»</button>
Although possible, please avoid using HTML tables to layout elements on your website.
You might be able to do it with margin:auto
http://bluerobot.com/web/css/center1.html

Categories

Resources