I'm trying to a add a class to every element that contains an <a> with a text so I could hide the <tr>'s that has no text! here is my HTML code and JavaScript:
$("tr a").each(function () {
var a= $(e);
if ($e.text().length > 0) {
tr.addClass("buttoneffect");
}
});
table tr {
height: 36px;
}
table tr:hover {
background-color: #BEDB7F;
}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>Test 1</td>
</tr>
<tr>
<td>Test 2</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Test 4</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Test 6</td>
</tr>
</tbody>
</table>
see this fiddle
first you are referencing e , which you didn't pass inside the event callback, and there is no tr directly accessible you have to find out the closest tr to that of a
$("tr a").each(function () {
var a= $(this);
if (a.text().length > 0) {
a.closest('tr').addClass("buttoneffect");
}
});
Also if you want the trs to be hidden, you can add css for that: fiddle
tr:not(.buttoneffect)
{
display:none;
}
$("tr a").each(function() {
var a = $(this);
if (a.text().length > 0) {
a.closest('tr').addClass("buttoneffect");
}
});
table tr {
height: 36px;
}
table tr:hover {
background-color: #BEDB7F;
}
.buttoneffect {
background: red;
}
tr:not(.buttoneffect) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>Test 1
</td>
</tr>
<tr>
<td>Test 2
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Test 4
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Test 6
</td>
</tr>
</tbody>
</table>
You can use .filter() find filter those elements and then call .addClass() on the filtered set to add the class
$("tr").filter(function () {
return $(this).find('a').text().trim().length > 0
}).addClass("buttoneffect");
Demo: Fiddle
use jquery parent().
$("tr a").each(function () {
var a= $(this);
if (a.text().length > 0) {
a.parnt('tr').addClass("buttoneffect");
}
});
Try this Demo Here
$("tr a").each(function () {
var a= $(this);
if (a.text().length > 0) {
a.closest('tr').addClass("buttoneffect");
}
});
Related
I have the following HTML table:
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
</table>
I would like to get all last elements which don't have the "treegrid-hide-column" class in each line.
How can in do that in CSS or JS ?
I tried doing that but it doesn't works well.
function addRightBorderOnTreetable() {
var arr = $('.treegridCustom tbody tr td:last-child');
for (var i=0; i<arr.length; i++) {
var currentEl = arr[i];
if ( !$(currentEl).hasClass("treegrid-hide-column") ) {
$(currentEl).css('border-right', '1px solid #bfbfbf');
}
}
}
CSS doesn't have this feature, but you can do it with jQuery:
$("tr").each(function() {
$(this).find("td:not(.treegrid-hide-column):last").each(function() {
$(this).css('border-right', '1px solid #bfbfbf');
});
});
$("tr").each(function() {
$(this).find("td:not(.treegrid-hide-column):last").each(function() {
$(this).css('border-right', '1px solid #bfbfbf');
});
});
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
We have to go row-by-row because there's no CSS "last element not matching this class", and jQuery's :last applies to the whole set, not the set at each level of thes elector.
If you added a class to your preferred td ?
<table>
<tbody>
<tr>
<td>1</td>
<td class="right-border">2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td class="right-border">5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td class="right-border">8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
And then change the css
.right-border {
border-right: 1px solid #bfbfbf;
}
Or with a js function
function addRightBorderOnTreetable() {
var el = $('.treegridCustom tbody tr .right-border');
el.css('border-right', '1px solid #bfbfbf');
}
you might need to run for loop like this. I think this is what you want to achieve.
$(document).ready(function() {
addRightBorderOnTreetable();
});
function addRightBorderOnTreetable() {
$.each($('tr'),function(){
var arr2 = $(this).find('td');
var j = arr2.length;
for(j=arr2.length; j>-1;j--){
var currentEl = arr2[j - 1];
if (!$(currentEl).hasClass("treegrid-hide-column") ) {
$(currentEl).css('border-right', '1px solid #bfbfbf');
return;
}
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
</table>
So simple use nth-last-child() here
<script>
$(document).ready(function(){
$( 'table tbody tr td:nth-last-child(2)').css('border-right', '1px solid #bfbfbf');
});
</script>
Jsfiddle
table tr td:not(.treegrid-hide-column):last-child {
border-right: 1px solid #bfbfbf;
}
I have a table with some rows. in this table i have Add button to append rows when clicked. my question is how can i load ajax seconpage in class = loadi in rows when Add clicked?
i wrote some codes but the codes is not working to load second page in div with class loadi. here is my Snippet:
$(document).ready(function() {
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
});
$(".loadi").load("secondpage.html");
})
.add {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable" border="1">
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
</table>
<span class="add">Add +</span>
You need to call load() within the click handler on the content that you just appended. Your current logic doesn't work as you call load() before the element exists, therefore nothing happens. Try this:
$(".add").click(function() {
var $tr = $('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>').insertAfter('#mytable tr:last');
$tr.find(".loadi").load("secondpage.html");
});
$(".add").click(function() {
var $tr = $('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>').insertAfter('#mytable tr:last');
//$tr.find(".loadi").load("secondpage.html"); // AJAX...
$tr.find(".loadi").text("load AJAX content here...");
});
.add {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable" border="1">
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
</table>
<span class="add">Add +</span>
You have to put the .load() inside the click handler:
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
$(".loadi").load("secondpage.html");
});
The issue was you called the .load() before click at document ready. If there will be more added rows. Then you might use .last() to get the last .loadi div:
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
$(".loadi").last().load("secondpage.html");
});
$(document).ready(function() {
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
// window.open("secondpage.html", '_blank');
$(".loadi").load("secondpage.html");
});
})
.add {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable" border="1">
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
</table>
<span class="add">Add +</span>
$("a").filter(function() {
return $(this).text().match('UP');
}).click(function() {
$('.highlight').removeClass('highlight');
var num = 1;
$('tr').eq(num).toggleClass('highlight');
});
What I want to do is that when I click on my link UP my default tr is to change back to his original color and the tr above change to the yellow color.
This is what i have right now:
Here is a sample that I hope does what you want. It have to be improved a bit, but it will do the trick :)
$(function() {
$('#up').on('click', function(){
var row = $('tr.highlight');
row.prev().addClass('highlight');
row.removeClass('highlight');
});
$('#down').on('click', function(){
var row = $('tr.highlight');
row.next().addClass('highlight');
row.removeClass('highlight');
});
});
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
tr.highlight{
background: yellow !important;
}
tr:hover{
background: #FF0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>2: Zebra Striping Demo</h2>
<table width="200" border="1" id = "changes">
<caption>
UP
Zebra Striping Demo DN
</caption>
<thead>
<tr>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
</thead>
<tbody>
<tr class = "highlight">
<td>April</td>
<td>May</td>
<td>June</td>
</tr>
<tr>
<td>July</td>
<td>August</td>
<td>September</td>
</tr>
<tr>
<td>October</td>
<td>November</td>
<td>December</td>
</tr>
<tr>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
</tr>
<tr>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
<tr>
<td>Spring</td>
<td>Summer</td>
<td>Fall</td>
</tr>
</tbody>
</table>
</body>
I am using this jsfiddle: http://jsfiddle.net/vaDkF/828/
(without the top and bottom option) to create a reordering table.
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
I would like to know if it is possible to have the up button disappear (display none) if it is the first row in the table, and the down button disappear if it is the last row in the table.
Thanks!
You can use CSS for this, with first-child and last-child selectors:
tr:first-child .up, tr:last-child .down {
display:none;
}
$(document).ready(function() {
$(".up,.down").click(function() {
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
tr:first-child .up,
tr:last-child .down {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
Updated Demo
I have a button, when I click it the tables td's must be empty, on second click they must be filled again.
Problem is, when I use .empty() it leaves the table empty and I can't restore the values.
.hide() and .show() only works with html elements, they cant hide/show content.
.html() and .text() selects the content but I can't find the way to toggle them.
jQuery code:
$('#totalsTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = totalsTable.row(tr);
if (row.child.isShown()) {
$('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)').html().show();
} else {
$('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)').html().hide();
}
});
HTML
<table id="totalsTable" class="table table-bordered small table-hover" width="100%">
<thead>
<tr>
<th></th>
<th>#{label['regress.totals']}</th>
<th>#{label['regress.description']}</th>
<th>#{label['regress.totals.debt']}</th>
<th>#{label['regress.totals.paid']}</th>
<th>#{label['regress.totals.debt']}<i class="fa fa-plus text-success" />#{label['regress.totals.overpay']}<i class="fa fa-minus text-danger" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>#{label['regress.totals.main-total']}</td>
<td>Kelių žodžių komentaras</td>
<td>3478 Eur</td>
<td>478 Eur</td>
<td class="text-success">3000 Eur</td>
</tr>
<tr class="active">
<td class="details-control"></td>
<th>#{label['regress.totals.extra-totals']}</th>
<td>Kelių žodžių komentaras</td>
<td>3478 Eur</td>
<td>4000 Eur</td>
<td class="text-danger">-522 Eur</td>
</tr>
<tr class="extra" hidden="true">
<td></td>
<td>Už žalų administravimą
</td>
<td>Kelių žodžių komentaras</td>
<td>200 Eur
</td>
<td>120 Eur</td>
<td class='text-success'>80 Eur</td>
</tr>
<tr class="extra" hidden="true">
<td></td>
<td>Bylinėjimo išlaidos
</td>
<td>Kelių žodžių komentaras</td>
<td>200 Eur
</td>
<td>120 Eur</td>
<td class='text-success'>80 Eur</td>
</tr>
<tr class="extra" hidden="true">
<td></td>
<td>Bylinėjimo išlaidos
</td>
<td>Kelių žodžių komentaras</td>
<td>200 Eur
</td>
<td>120 Eur</td>
<td class='text-success'>80 Eur</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th colspan="2" style="text-align:right">#{label['regress.total-sum']}</th>
<th>6956 Eur</th>
<th>4478 Eur</th>
<th class="text-success">2478 Eur</th>
</tr>
</tfoot>
</table>
Once you use .empty(), it deletes the content (by emptying it). The contents cannot be restored because it's been deleted.
You can get around this by adding an inner element and show / hide that, eg:
<table>
<tr>
<td><div>content</div></td>
then
$("table td:nth-child(0) > div,table td:nth-child(6) > div").hide();
or, you can store the existing value before removing it, eg:
$("table td:nth-child(0)").each(function() {
$(this).data($(this).html());
$(this).html("");
});
then, to restore:
$("table td:nth-child(0)").each(function() {
$(this).html($(this).data("store"));
});
Note, you need to use .each as each element's value in the selector needs to store its own value.
Do something like this
// Selecting all elements
$el = $('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)');
if (row.child.isShown()) {
$el.each(function () {
// Setting HTML from data-val
$(this).html($(this).data("val"));
});
} else {
$el.each(function () {
// Setting data-val equals to html which can be used later and emptying the html
$(this).data("val", $(this).html());
$(this).html("");
});
}
I see others have now answered with what are most probably better solutions, but here is a fiddle I made in case it helps: https://jsfiddle.net/w81qtgp2/
$('table').click(function () {
$(this).children().each(function () {
if ($(this).html() === '<td> </td>') {
$(this).html($(this).data('text'));
} else {
var tdText = ($(this).html());
$(this).data('text', tdText);
$(this).html('<td> </td>');
}
});
});