I have a table. When a row is clicked on, it is given .active and the row is highlighted. I need to work on other ways to change the selected row other than clicking on it. For my example, I've chosen a next button.
http://jsfiddle.net/dHxKW/
I can do the logic behind what happens when it gets to the end of the table or anything else like that.
I just need help figuring out how to get the index of the TR with class active so that I can increase the index, which then I can give the next row the active class... That's all I need to do... how to get that row index.
This is some of the stuff I've tried that doesn't work...
alert( $('table tr .active').index() );
var row = $('table tr.active').first();
alert(row.index() );
alert($("table").index( $('table tr .active') ));
This is what I'm using as a reference (https://stackoverflow.com/a/469910/623952)
var index = $("table tr").index($(this));
but I can't get the selectors right...
Solution.....
it would have never worked... I wrote bad code:
$(this).children("tr").addClass("active"); (this = clicked on tr in the click function)
But new code:
http://jsfiddle.net/dHxKW
$("#table_one").on("click", "tr", function () {
$(".active").removeClass("active");
$(this).children("td").addClass("active");
// removed line: $(this).children("tr").addClass("active");
$(this).addClass("active");
});
$('#btn_next').on('click', function ()
{
// right here **********
var n = $('tr.active').next();
$(".active").removeClass("active");
n.children("td").addClass("active");
n.addClass("active");
});
** Just as a note, I am adding the class to both the tr and td's... I'm not sure if this is the best way but tr doesn't have background properties, so I just added it to both. I think this might be the reason for my confusion....
The issue is that the "active" class is not being added to the "tr" elements.
In this line you are looking for tr children of this, but this is a tr, thus no children get selected: $(this).children("tr").addClass("active");
Instead try $(this).addClass("active");
var counter = 0;
var index = -1
$('table tr').each(function(){
if( ! $(this).hasClass('active')) {
counter++;
}
else index = counter;
})
$('td.active').parent().index('tr')
will get you the index.
jsFiddle example
jsFiddle example 2
BTW, the link in your click function $(this).children("tr").addClass("active"); would seem to do nothing as it searches for a child row of a row.
$('table tr .active').removeClass('active').parent().next().children('td').addClass('active');
this should do it
Related
Basically, I have a table that has many rows. What I want to do is scroll the row I click to the top of the div that encases the table.
Here is the StackOverflow question I started from:
How to scroll table to particular tr programmatically
Basically, this person was able to make the table jump to the table row he wanted by manually putting the in nth-child number like so:
var s = $("table tbody > tr:nth-child(20)").position();
$( "div" ).scrollTop( s.top );
Here is the fiddle he worked on showing it working for manually setting the nth-child in the code: http://jsfiddle.net/4Z7Z9/
Here is how I changed the code:
function scrollThisToTop(row) {
var s = $("table tbody > tr:nth-child(" + row + ")").position();
$( "div" ).scrollTop( s.top );
}
Here is my fiddle I am working on: http://jsfiddle.net/4Z7Z9/210/
Any help greatly appreciated!
I was able to get it working in 3 simple steps. Checkout the solution in fiddle HERE
You will need to add on click functionality as well as and ID for your containing div.
The new Function:
function scrollThisToTop(row) {
// Get the id of the row
var myElement = row.id;
// Get the variable for the top of the row
var topPos = row.offsetTop;
// The container div top to the row top
document.getElementById('container').scrollTop = topPos;
}
On click functionality:
$('tr').on("click", function () {
scrollThisToTop(this);
});
Div id:
<div id="container">
This helps you?
$('table tr').bind('click', function() {
var s = $('table').position();
$('div').scrollTop(s);
});
I have a table with td's with id. I need to select those td's and reorder the columns.
$('table tr').each(function () {
var tr = $(this);
var tds = $('#Status');
var tdA = $('#Address');
alert(tds.innerHtml); //Here am getting a blank msg
tds.remove().insertAfter(tda); //This is what i need to do
});
I found the answer:
var tds = tr.find("td[id='Status']"); //what i was looking for
Thanks for ur support and special thanks for voting my genuine question 2 points down :D, since iam not point hungry, No offense :-)
var selectedTd = $("#ID_OF_TD");
or to call the method like on click etc etc you can directly call the method
$("#ID_OF_TD").click(function(){
});
you need to put this code in document ready section ..
$("document").ready(function(){
$("#ID_OF_TD").click(function(){
alert('td clicked');
});
});
Simply do $("#idHere").
More Info: http://api.jquery.com/category/selectors/
Use Id Selector
$('#tdID')
//^# followed by html id
Using jQuery apply: $('#td_ID')
we can use :
$('table > tr > td#Status');
$('table > tr > td#Address');
I have a number of calendars on a page. These are made up of HTML tables and each day is a td. Each td has an onClick attribute which I cannot remove or modify in the HTML. I am removing all onClick attributes from the days apart from Friday and Saturday using the following jQuery:
var kalvoid = jQuery(".kc_mainTable tr td:nth-child(1),.kc_mainTable tr td:nth-child(2),.kc_mainTable tr td:nth-child(3),.kc_mainTable tr td:nth-child(4),.kc_mainTable tr td:nth-child(7)");
jQuery(kalvoid).removeAttr("onClick");
The problem I have is that I also want to remove the onClick attribute from friday as well and then re-add it if a user clicks on a Saturday. I have been playing around with the following code:
var kalfri = jQuery(".kc_mainTable tr td:nth-child(5)");
var kalsat = jQuery(".kc_mainTable tr td:nth-child(6)");
jQuery(kalfri).removeAttr("onClick");
jQuery(kalsat).click(function() {
(function(kalfri){
var kalfriID = jQuery(this).attr("id");
jquery(this).attr("onClick", kalfriID);
});
});
This obviously isn't working (even I can see that the code is wrong), the problem is that I don't know the correct jQuery to do this. I have been playing around with this for some time with no luck. Any ideas?
Thank you.
You could just store it in data()
jQuery(function($) {
var kalfri = $(".kc_mainTable tr td:nth-child(5)");
var kalsat = $(".kc_mainTable tr td:nth-child(6)");
kalfri.data('onclick', kalfri.attr('onclick')).removeAttr("onClick");
kalsat.click(function() {
var kalfriID = kalfri.data('onclick');
kalfri.attr("onclick", kalfriID);
});
});
And you don't have to use jQuery everywhere
http://jsfiddle.net/wT3Ev/
How do i retrieve the text that is in the row TH of the selected td?
Yes i found some related posts, but nothing that does the trick for me.
I tried:
$(document).on("click", "#sTab td,#pvTab td", function () {
alert($('#sTab tr').find('th:nth-child(' + $(this).parent().index() + ')').innerHTML);
alert($(this).parent());
var th = $(this).closest('table').find('th').eq( this.cellIndex );
alert(th.innerHTML);
}
I'd suggest:
/* binds a click-handler to the 'tbody' element,
filters those clicks to only those that originate on a 'td' element:
*/
$('tbody').on('click', 'td', function(){
/* gets the siblings of the clicked 'td' element, filters those siblings
for 'th' elements, gets the first of those matching elements,
and then retrieves the text of that element, assigning it to the variable:
*/
var thText = $(this).siblings('th').first().text();
console.log(thText);
});
JS Fiddle demo.
Or, using a little more DOM (a tiny, tiny efficiency increase):
// same as above:
$('tbody').on('click', 'td', function(){
/* using DOM (not jQuery), moving from the clicked 'td' element
to its parentNode ('tr'), retrieving the first of its children
(JavaScript is zero-indexed, the first child is at position '0'),
and retrieving its textContent (the text of the 'th'):
*/
var thText = this.parentNode.children[0].textContent;
console.log(thText);
});
JS Fiddle demo.
References:
first().
on().
siblings().
text().
This should work:
var index = $(this).index();
console.log($(this).parents("table").find("th:eq(" + index + ")").text());
Edit: row header: console.log($(this).closest("tr").find("th").text());
Fiddle: http://jsfiddle.net/wT3Ev/4/
You weren't too far off. This works with your example:
$(document).on("click", "#sTab td,#pvTab td", function () {
var tdIndex = $(this).index(),
table = $(this).closest('table'),
headingIndex = tdIndex + 1,
thText = table.find('th:nth-child(' + headingIndex + ')').text();
alert(thText);
});
$(this).parent().find('th').html();
edit: explanation - row is always cell's parent so no need to look for index - just look for header in the row where you have the cell.
http://jsfiddle.net/qA6R9/
I have an html table, and i add a class on one row.
The class is applied this way, and i later want to swap the rows.
$('.bTable').on('click', 'tbody tr', function(event) {
if($(this).attr('class')!='highlightgreen'){
$(this).addClass('highlightgreen').siblings().removeClass('highlightgreen');
}else{
$(this).removeClass('highlightgreen');
}
});
I cant seem to be able to select that class row with eq().
Error example: i try to alert() the a and the row appears fine, i alert() the b, and null comes up.
var a = $('.bTable tbody tr').eq(0);
var b = $('.bTable tbody tr .highlightgreen').eq(0);
How can i select properly that .highlightgreen row?
When selecting a TR with a class, you do $('tr.className'), notice there are no spaces.
When selecting an element inside a TR that has a class, you do $('tr .className').
So just remove the space
var b = $('.bTable tbody tr.highlightgreen').eq(0);
And eq(0) will get the first element in the collection
$('.bTable').on('click', 'tbody tr', function(event) {
$(this).toggleClass('highlightgreen')
.siblings().removeClass('highlightgreen');
});