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.
Related
I need to make my table have pagination. I am developing using React.js and using a simple <table> to display information that is being fetched.
The table uses mapping to dynamically grow when new information is generated through the UI. Currently, the table is just simply <table> tag that uses some CSS for styling. I would like to limit the number of rows to 10, and have pagination at the bottom for when there are more than 10 rows of data.
How can I achieve this?
<div className="app-container">
<table>
<thead>
<tr>
<th>Loan ID</th>
<th>Owner</th>
<th>Amount (R)</th>
<th>Rate (%)</th>
<th>Term (Months)</th>
<th>Start Date</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
{Tokens.map((token) => (
<tr>
<td>{token[0]}</td>
<td>{token[1]}</td>
<td>{token[2]}</td>
<td>{token[3]}</td>
<td>{token[4]}</td>
<td>{token[5]}</td>
<td>{token[6]}</td>
</tr>
))}
</tbody>
</table>
</div>
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>
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>
I know this is not how the code should be structured but I am limited. I am trying to include a datatable inside angular ng-if section. When I take off the ng-if statement the js runs fine. I am looking for ways around this where it works. I have tried to move the js outside of the ng-if, but then the datatable doesn't work. Any hint in the right direction would be helpful. Thanks.
<div ng-if="test">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<!-- Results table -->
<table id="example2" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Account</th>
<th>Created On</th>
<th>Table ID</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2011-04-28 13:32:07</th>
<th>Mortgage</th>
<th>Edit</th>
</tr>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2016-04-18 14:36:07</th>
<th>Monthly</th>
<th>Edit</th>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example2').DataTable();
});
</script>
</div>
ng-if will create a child scope which is different from your controller scope. Try to use ng-show instead
<div ng-show="test">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<!-- Results table -->
<table id="example2" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Account</th>
<th>Created On</th>
<th>Table ID</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2011-04-28 13:32:07</th>
<th>Mortgage</th>
<th>Edit</th>
</tr>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2016-04-18 14:36:07</th>
<th>Monthly</th>
<th>Edit</th>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example2').DataTable();
});
</script>
</div>
ng-if has its own scope, so the functions you are calling are undefined inside of it.
ng-show is a possible solution, but has it's own caveats.
Plase, take a look at this answer, which explains the importance of using the dot in your directives. Even if you choose to use ng-show, I would recommend that you refactor your controller and view to avoid further complications down the road.
If you are new to angular, don't hesitate to read John Papa's styleguide, which covers that situation and many others.
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/