jQuery .on() event not working with :lt() selector - javascript

I am trying to generate click event on every table data <TD> except the last one <td> but It's just working with the First row not the rest.
HTML:
<table class="table" style="width:100%;">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
JS code:
$('.table tbody').on('click', 'tr td:lt(3)', function(){
// Trying to check the click event
console.log('working');
});
JSFIDDLE
jsfiddle
If i remove the :lt(3) selector then its working fine but i don't know why it's not working with less then selector?

Well, this is how the :lt() selector works:
The index-related selectors (including this "less than" selector)
filter the set of elements that have matched the expressions that
precede them. They narrow the set down based on the order of the
elements within this matched set. For example, if elements are first
selected with a class selector (.myclass) and four elements are
returned, these elements are given indices 0 through 3 for the
purposes of these selectors.
In your case, tr td is matched first which matches 16 cells, then the first 3 elements from the resulting set are filtered. You could revise the code like this:
// trap clicks on .table tbody and filter all td elements
$('.table tbody').on('click', 'td', function () {
if ($(this).index() < 3) {
console.log('working');
}
});
Or better, use the CSS3 :nth-child() selector which is also available in jQuery:
// trap clicks on .table tbody and filter all td elements
// that are "-n+3"th child of their parent
$('.table tbody').on('click', 'td:nth-child(-n+3)', function () {
console.log('working');
});
The nth-child selector is explained here.

You can also do
$('.table tbody tr').on('click', 'td:lt(3)', function(){
console.log('working');
});
If you don't, it will take the first 3 td, of all tbody, not the one of each row (you can try your code with 5 instead of 3, and see what's happening : it will be applied on tr 1 : td 1, td 2, td 3, td 4 and tr2 : td 1 ( the first 5 td of tbody)
jsfiddle

Related

How to select the text of respective table data separately under table row with jQuery

This is the code
<tbody id="table-body">
<tr>
<td id="c1">AAA0</td>
<td id="c2">2%</td>
</tr>
</tbody>
I want to select data of ID c1 under < tr > tag.
I am using this jQuery code but it is selecting whole text under < tr > tag.
$("#table-body").on('click','tr',function(e){
e.preventDefault();
console.log($(this).text());
})
I am getting AAA02% as the output if this code.
I want to select AAA0 and 2 separately.
How to do it ?
Since there is more than one td element in each clicked tr element, you have to loop through each of them to get the text individually.
You can use find() and each() like the following way:
$("#table-body").on('click','tr',function(e){
$(this).find('td').each(function(){
console.log($(this).text());
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="table-body">
<tr>
<td id="c1">AAA0</td>
<td id="c2">2%</td>
</tr>
</tbody>
</table>
Try this:
console.log($(this).find('.c1').text());
And use class attribute instead of id
You are getting all text inside tr because you are binding click event on the tr and so $(this) refers to thetr you clicked.
To get AAA0 only, you can use children() and pass id to select a specific td
$("#table-body").on('click','tr',function(e){
console.log($(this).children('#c1').text());
});
But since you are assinginig id to the td's, you can also directly attach the click event to the td as
$("#table-body #c1").on('click','tr',function(e){
console.log($(this).text());
});

jQuery- How to select a element with class name from a list of elements

I am using jQuery.
I want to select a cell from a table.
So I tried the following codes.
// First line works fine for me. I can get a list of columns at the correct target row.
var targetColumns = $(elemClicked).closest("tr").find("td");
// I want to get the cell with the class named "draftstatus". This line has problem. I cannot get what I want.
var targetCell = columnsAtTargetRow.$(".draftstatus");
The targetColumns inspected from browser looks like the following:
The 5th td above is my target cell.
I also try to use find() function. It won't work either because find() will start from next children level.
columnsAtTargetRow.find(".draftstatus"); // this does not work.
What functions should I used to get that cell within that "list of td".
Thanks in advance.
You just need to figure out which selectors to use.
var targetColumns = $(elemClicked).closest("tr").find("td");
this goes up the DOM to the "tr" and selects the tds. If the elemClicked is inside a td you can select the tds with closest("td"), and then use siblings(".draftstatus");
If the elemClicked is a td, then you can just use siblings(".draftstatus");
Here is some example code to help demonstrate some selectors. Hope this helps some and not confused you more.
$(function(){
//reference all cells with myclass class using filter
$("#table1 tbody td").filter(".myclass").addClass("red");
// click events for all tds reference the .target class cell using siblings
$("#table1 tbody td").on("click",function(e){
$(this).siblings(".target").toggleClass("red");
});
//items inside a table cell click event
$("#table1 tbody td a").on("click",function(e){
//toggle bold class
$(this).closest("td").siblings(".target").toggleClass("bold");
//prevent event from bubbling up
e.stopPropagation();
});
})
.red {
background-color:red;
}
.bold { font-weight:bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" id="table1">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td class="myclass target">value2</td>
<td>Two link</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td class="myclass target">value2</td>
<td>Two link</td>
</tr>
</tbody>
</table>
This is incorrect:
columnsAtTargetRow.$(".myclass");
This should be:
columnsAtTargetRow.find(".myclass");

Show only a limited number of rows in a table

I am trying to limit the number of rows displayed in a <table>. I need to show only 2 rows out of whatever number of records fetched. There's a small button at the end of the table, on click of which the rest of the records will get revealed.
Here's a sample screenshot of how the table will look like.
I have tried searching over SO and other websites, but unable to get through. I can't use any jQuery plugin for table either.
How can I achieve this using jQuery/JavaScript?
Select tr elements from tbody and use slice method to select a range of them:
$("table > tbody > tr").hide().slice(0, 2).show();
Demo:
$("table > tbody > tr").hide().slice(0, 2).show();
$(".show-all").on("click", function() {
$("tbody > tr", $(this).prev()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>Alice</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
</tr>
<tr>
<td>3</td>
<td>Carol</td>
</tr>
</tbody>
</table>
<button class="show-all">Show all</button>
.slice( start [, end ] )
Reduce the set of matched elements to a subset specified by a range of indices.
start
Type: Integer
An integer indicating the 0-based position at which the elements begin to be selected. If negative, it indicates an offset from the end of the set.
end
Type: Integer
An integer indicating the 0-based position at which the elements stop being selected. If negative, it indicates an offset from the end of the set. If omitted, the range continues until the end of the set.
You can use :gt selector to target other rows having index greater than 2 and then hide them:
$('table tr:gt(1)').hide();// :gt selector has 0 based index
This is how I did it:
<script>
$(document).ready(function () {
$('table tr:gt(10)').hide();
});
function showAllRows() {
$('table tr').show();
}
</script>
Then the button for show all:
<button onclick="showAllRows()">Show all</button>

jQuery - change table cells position

how can I change via jquery the cells position from 1 2 to 2 1 ?
<table id='mytable'>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
$('#mytable tr td:eq(0)').appendTo('#mytable tr');
The JSFIDDLE.
If you want to change all the second td to first position in your table, then you can use:
$.each($('#mytable tr td:eq(1)'), function() {
$(this).insertBefore($(this).prev());
})
Actually, above code will not work if your table have more than one <tr> element, if that is the case then you need to use .find():
$('#mytable tr').find('td:eq(1)').each(function() {
$(this).insertBefore($(this).prev());
});
Fiddle Demo
References: .each() , .find() , .insertBefore() , .prev()
with append
http://jsfiddle.net/F7HmQ/1/
$(function(){
var td = $("td").first() ;
$("tr").first().append(td);
});

set tr background for td values

<table id="tab" border=2>
<tr> <td>1</td><td>a</td><td>red</td> </tr>
<tr> <td>2</td><td>a</td><td>green</td> </tr>
<tr> <td>3</td><td>a</td><td>orange</td> </tr>
<tr> <td>4</td><td>a</td><td>green</td> </tr>
<tr> <td>5</td><td>a</td><td>yellow</td> </tr>
<tr> <td>6</td><td>a</td><td>blue</td> </tr>
</table>
i can't modify html. i can use only jquery and css. i would like make:
if td == red then all TR with this TD is red, if td == green then all TR is green.
how can i make this?
live example: http://jsfiddle.net/sjuKa/1/
$('#tab tr').each(function() {
$(this).css({'background': $(this).children('td:last').text() });
});
example: http://jsfiddle.net/simoncereska/sjuKa/3/
You can use .text() to get the text value of a cell, and .parent() to get the element's parent. Combining these, you can loop the td tags, check if they contain 'red', and if so, get their .parent() and set its background-color to red.
See http://jsfiddle.net/sjuKa/2/ for a working example :)
JS:
var tds = $('td');
tds.each(function() {
$(this).parent().addClass( $(this).html().trim() );
})
CSS
.red
{
background-color: red;
}
JSFiddle
Same for all the rest - meaning CSS classes named: orange, green etc.
$(document).ready(function(){
$('table tr').each(function(){
if($(this).children(':last').text() == 'red') {
$(this).children('td').css('background-color', 'red');
}
})
})
fiddle here http://jsfiddle.net/sjuKa/1/

Categories

Resources