last td of table with if statement - jquery - javascript

There are lots of answers about this but none of them includes any if statement. So, I need something like this:
if($(this) == "last <td> of the row")
How can I do that? Thanks

You can use :last-child selector to test if its the last child of its parents.
From jQuery API Doc:
:last-child
SelectorSelects all elements that are the last child of their parent.
While :last matches only a single element, :last-child can match more than one: one for each parent.
So if you use td:last, you'll only get true when click on 8 in the snippet(and if you don't use td:last but :last, no td will tested true as they're all not the last element in the DOM)
While click on 4 and 8 will both tested true if you use :last-child, as they both are the last td in tr.
$('td').click(function() {
console.log($(this).text());
if ($(this).is(':last-child')) {
console.log('last');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>

Related

JQuery - Table align numeric column at right

I'm making a dinamic table and i have a problem with my code. He is checking every TD and aligning it individuality.
I want to put a rule like this:
If (ThereIsAnyLetterInThisColumn) -> AlignAllThisColumnToLeft
Here is a Example Plunker: https://plnkr.co/edit/5HtbKh8B1mJEk0yqQIkd?p=preview
In this example, for example, all values ​​must be left-aligned, because in the column there are numbers and letters. If the column were all numeric, it should be aligned to the right
Can anyone help me?
Thanks a lot!!
in the third column, since there i 4s in the last row, ENITRE columnis aligned right.
the second column s aligned left since there is no letter
the first column is alinged right since all are letters.
$('td').each(function(){
if(isNaN($(this).text())){
var idx = $(this).index();
$('tr').each(function(){ $(this).children('td:eq('+idx+')').addClass('left-align');})
}
});
.left-align{ text-align:left;}
td{border:1px solid #ccc; text-align:right}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width=500 cellborder=1>
<tr>
<td>one</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>two</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>three</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>four</td>
<td>4</td>
<td>4s</td>
</tr>
</table>
I think this code should work for you.
$('td').each(function(){
var text_td = $(this).html();
if (text_td.indexOf('yourletter') > -1) {
$(this).css('text-align','right');
}
}

`alert($('table tr').html());` displaying only one row of table

<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" >
$(function () {
alert($('tr').html());
})
</script>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
I have a simple HTML table. In a JQuery script I tried to alert all rows in the table, but it alerts only one row of table. What does $('tr') actually return?
Why isn't it possible to display all the rows if $('tr').css('background-color', 'red'); can change the colors of all?
html() : Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.
You could loop through all the rows using each() and use alert to display the html content :
$('tr').each(function(){
alert($(this).html());
});
Hope this helps.
$(function () {
$('tr').each(function(){
alert($(this).html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
You need to get the html for each tr and display the html in two alerts.
This will display your tr is two alert messages:
SCRIPT
$(function () {
$('tr').each(function() {
alert($(this).html());
});
});
See working example at: https://jsfiddle.net/4qb4j6s1/1/
The reason $('tr').css('background-color', 'red'); changes all tr's background color is because the jquery function css is applied to all instances on the of the element unless otherwise specified. Alert(); only displays the first instance of an html element!
In order to display the entire table in one alert you can do:
SCRIPT
alert($('table').html());

Compare tabledatas and add CSS if the tabledata is

I have a HTML-table with several tablerows. Each row contains 2 tabledata elements.
These td elements are filled with numbers.
I need code that helps me compare the numbers of each row and add CSS.
An example:
<tr>
<td>12</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
We are always going to use CSS on the second tabledata element. If the value of the second td is lesser than the value of the first td element, it has to appear in red color.
On the other hand, if the value of the second td element is greater than the value of the first td element it has to appear in green color.
This means that the tables contents should look something like this:
<tr>
<td>12</td>
<td style='color:green;'>15</td>
</tr>
<tr>
<td>3</td>
<td style='color:red;'>1</td>
</tr>
How can this be done?
You can use jQuery to get the inner values of each td element, compare the values and apply a style given the output. This assumes you always have two td elements. Any more and you would have to loop each td in the row and keep a running count.
$("table tr").each(function(){
var firstTd = $(this).children(":first");
var secondTd = $(this).children(":last");
if (secondTd.html() < firstTd.html()) {
secondTd.css("background-color", "red");
} else if (secondTd.html() > firstTd.html()) {
secondTd.css("background-color", "green");
}
});
JSFiddle
You can try with this function: link to fiddle
This solution is without using JQuery of course.
Just in case, I also post the code here:
<body onload="myFunction()">
<table>
<tr>
<td>12</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
</table>
</body>
<script>
function myFunction(){
var tds = document.getElementsByTagName("td");
for (var i=0; i<tds.length; i++){
if (i>=1 && i%2 != 0){
if (parseInt(tds[i].innerText) > parseInt(tds[i-1].innerText)) {
tds[i].style.color = "green";
} else {
tds[i].style.color = "red";
}
}
}
}
</script>

jQuery .nextAll() is not working with html table columns

I have a html table as below:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
On click of a td I am changing the color of it's next 4 td's and for that I have done it in jquery as below:
$(this).nextAll("td").slice(0, 4).addClass("selected");
Above code is working if I click on 1st TD then it selects further 4 td's but if I click on 4th td then it selects only 5th td. I want it to select another 3 td's in next row as well.
Please tell me how can I fix this?
jQuery .index() method returns the index of passed element in the current set. By using returned index you can .slice() the collection, this is more efficient than querying the DOM on each click, especially when you have a big table:
var $tds = $('#table td').on('click', function() {
var i = $tds.index(this);
$tds.slice(++i, i+4).addClass("selected");
});
http://jsfiddle.net/MamYX/
You can simply add the td of the following row. :
$(this).nextAll("td").add($(this).closest('tr').nextAll().find('td'))
.slice(0, 4).addClass("selected");
Demonstration
var $tds = $('table td').click(function(){
var idx = $tds.index(this);
$tds.filter(':gt(' + idx + '):lt(4)').addClass('selected')
})
Demo: Fiddle

How to select the <tr> which holds the <a> andchange the color

I have a table structure:
<table style="width: 100%;">
<tr>
<td>
one
</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>
Four
</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>
Seven
</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</table>
CSS:
.yy
{
background-color: red;
}
Now the problem is if I click on the <a> its corresponding <tr> element (<tr> that holds the <a>) background should be red, again if I click on the same <a> it should come back to normal.
How to identify the the <tr> on which the <a> is clicked.
EDIT:
I tried:
$(".yy").not($(this).parent().parent()).removeClass("yy");
$(this).parent().parent().toggleClass("yy");
it worked.
$('a').live('click', function(){
$(this).parent().parent() //this is how you select the <tr> that the <a> is in
//first .parent() gets the <td> second .parent() gets the <tr>
});
Let me know if you need more. There might be a better way but I'm not positive.
I think closest() should get what you are looking for.
$('a').click(function() {
var tr = $(this).closest('tr');
tr.toggleClass('yy');
});
This way you do not have to assume anything about how nested the anchor is in the containing tr.
Example

Categories

Resources