Babar Ali
Reputation: 71
Target all <td> of a row with jquery
I am a beginner in jQuery, and stuck on something. I hope someone will help me out.
I want to change the color of the value in all <td> from a specific <tr>. The <tr> is Days left. I want to make all the <td> values in that specific <tr> to be red if the value is < 0 , and make it green if the value is > 0 . I have tried a lot and can only get the first TD to become green.
$(document).ready(function() {
$('tr').each(function() {
if ($(this).find('td').text().trim() > "0") {
$('#tt').css('color', 'green');
} else {
$('#tt').css('color', 'red');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main" class="table table-striped table-bordered dataex-res-configuration">
<thead>
<tr>
<th data-class="expand">Days Left</th>
<th data-hide="phone">Book Title</th>
<th data-hide="tablet,phone">Card No:</th>
<th data-hide="tablet,phone">Card Owner</th>
<th data-hide="tablet,phone">Quantity Rented</th>
<th data-hide="tablet,phone">Rented Date</th>
<th data-hide="tablet,phone">Due Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td id="tt">121344534</td>
<td>the Great Gatsby</td>
<td>34ABDSFS3332</td>
<td>James Carter</td>
<td>15</td>
<td>12-4-2018</td>
<td>13-4-2019</td>
<td>
<a data-toggle="modal" data-target="#editRentBookModel">
<i class="la la-edit"></i>
<a data-toggle="modal" data-target="#viewRentBookModel">
<i class="la la-eye"></i>
<a data-toggle="modal" data-target="#confirmDeleteModel">
<i class="la la-
la-trash"></i>
</td>
</tr>
<tr>
<td id="tt">121344534</td>
<td>the Great Gatsby</td>
<td>34ABDSFS3332</td>
<td>James Carter</td>
<td>15</td>
<td>12-4-2018</td>
<td>13-4-2019</td>
<td>
<a data-toggle="modal" data-target="#editRentBookModel">
<i class="la la-edit"></i>
<a data-toggle="modal" data-target="#viewRentBookModel">
<i class="la la-eye"></i>
<a data-toggle="modal" data-target="#confirmDeleteModel">
<i class="la la-
la-trash"></i>
</td>
</tr>
<tr>
<td id="tt">121344534</td>
<td>the Great Gatsby</td>
<td>34ABDSFS3332</td>
<td>James Carter</td>
<td>15</td>
<td>12-4-2018</td>
<td>13-4-2019</td>
<td>
<a data-toggle="modal" data-target="#editRentBookModel">
<i class="la la-edit"></i>
<a data-toggle="modal" data-target="#viewRentBookModel">
<i class="la la-eye"></i>
<a data-toggle="modal" data-target="#confirmDeleteModel">
<i class="la la-
la-trash"></i>
</td>
</tr>
<tr>
<td id="tt">121344534</td>
<td>the Great Gatsby</td>
<td>34ABDSFS3332</td>
<td>James Carter</td>
<td>15</td>
<td>12-4-2018</td>
<td>13-4-2019</td>
<td>
<a data-toggle="modal" data-target="#editRentBookModel">
<i class="la la-edit"></i>
<a data-toggle="modal" data-target="#viewRentBookModel">
<i class="la la-eye"></i>
<a data-toggle="modal" data-target="#confirmDeleteModel">
<i class="la la-
la-trash"></i>
</td>
</tr>
<tr>
<td id="tt">121344534</td>
<td>the Great Gatsby</td>
<td>34ABDSFS3332</td>
<td>James Carter</td>
<td>15</td>
<td>12-4-2018</td>
<td>13-4-2019</td>
<td>
<a data-toggle="modal" data-target="#editRentBookModel">
<i class="la la-edit"></i>
<a data-toggle="modal" data-target="#viewRentBookModel">
<i class="la la-eye"></i>
<a data-toggle="modal" data-target="#confirmDeleteModel">
<i class="la la-
la-trash"></i>
</td>
</tr>
</tbody>
</table>Upvotes: 0
Views: 622
Answers (1)
Ralph Mirasol
Reputation: 137
Sorry didn't read properly :D edited for jquery
you can use first-child selector
jQuery( "#main td:first-child" ).css('','');
$(document).ready(function(){
$('#main td:first-child').each(function(){
if(parseInt($(this).text()) < 0){
$(this).css('color','red');
}else{
$(this).css('color','green');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main" class="table table-striped table-bordered dataex-res-configuration">
<thead>
<tr>
<th data-class="expand">Days Left</th>
<th data-hide="phone">Book Title</th>
<th data-hide="tablet,phone">Card No:</th>
<th data-hide="tablet,phone">Card Owner</th>
<th data-hide="tablet,phone">Quantity Rented</th>
<th data-hide="tablet,phone">Rented Date</th>
<th data-hide="tablet,phone">Due Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td id="tt">-1</td>
<td>the Great Gatsby</td>
<td>34ABDSFS3332</td>
<td>James Carter</td>
<td>15</td>
<td>12-4-2018</td>
<td>13-4-2019</td>
<td>
<a data-toggle="modal" data-target="#editRentBookModel">
<i class="la la-edit"></i>
<a data-toggle="modal" data-target="#viewRentBookModel">
<i class="la la-eye"></i>
<a data-toggle="modal" data-target="#confirmDeleteModel">
<i class="la la-
la-trash"></i>
</td>
</tr>
<tr>
<td id="tt">121344534</td>
<td>the Great Gatsby</td>
<td>34ABDSFS3332</td>
<td>James Carter</td>
<td>15</td>
<td>12-4-2018</td>
<td>13-4-2019</td>
<td>
<a data-toggle="modal" data-target="#editRentBookModel">
<i class="la la-edit"></i>
<a data-toggle="modal" data-target="#viewRentBookModel">
<i class="la la-eye"></i>
<a data-toggle="modal" data-target="#confirmDeleteModel">
<i class="la la-
la-trash"></i>
</td>
</tr>
<tr>
<td id="tt">121344534</td>
<td>the Great Gatsby</td>
<td>34ABDSFS3332</td>
<td>James Carter</td>
<td>15</td>
<td>12-4-2018</td>
<td>13-4-2019</td>
<td>
<a data-toggle="modal" data-target="#editRentBookModel">
<i class="la la-edit"></i>
<a data-toggle="modal" data-target="#viewRentBookModel">
<i class="la la-eye"></i>
<a data-toggle="modal" data-target="#confirmDeleteModel">
<i class="la la-
la-trash"></i>
</td>
</tr>
<tr>
<td id="tt">121344534</td>
<td>the Great Gatsby</td>
<td>34ABDSFS3332</td>
<td>James Carter</td>
<td>15</td>
<td>12-4-2018</td>
<td>13-4-2019</td>
<td>
<a data-toggle="modal" data-target="#editRentBookModel">
<i class="la la-edit"></i>
<a data-toggle="modal" data-target="#viewRentBookModel">
<i class="la la-eye"></i>
<a data-toggle="modal" data-target="#confirmDeleteModel">
<i class="la la-
la-trash"></i>
</td>
</tr>
<tr>
<td id="tt">121344534</td>
<td>the Great Gatsby</td>
<td>34ABDSFS3332</td>
<td>James Carter</td>
<td>15</td>
<td>12-4-2018</td>
<td>13-4-2019</td>
<td>
<a data-toggle="modal" data-target="#editRentBookModel">
<i class="la la-edit"></i>
<a data-toggle="modal" data-target="#viewRentBookModel">
<i class="la la-eye"></i>
<a data-toggle="modal" data-target="#confirmDeleteModel">
<i class="la la-
la-trash"></i>
</td>
</tr>
</tbody>
</table>-- Modified Snippet --
Upvotes: 1
Related Questions
- How to target first td of every row with pure JS?
- How to select all td elements of a given table?
- Target nested td inside a table
- Targeting specific table in jQuery
- jquery selector for td in a table
- target <td> in the same <tr>
- Use JQuery to get a specific TD in a series of Tables
- How to target another element on the same row in a table with jQuery
- jquery selector only on td's of table element
- jQuery selectors -> all TD within a specific table