I have HTML that looks like this:
<table>
<tr>
<td>Hello<div class="yo"></div></td>
<td>Bye<div class="yo"></div></td>
</tr>
<tr>
<td>Foo<div class="yo"></div></td>
<td>Bar<div class="yo"></div></td>
</tr>
...
<!-- Rows continue on... -->
The divs have a listener for tab keydown, so whenever a tab is pressed it should go to the next link. (or perhaps it's enough to go to the next td element?)
For instance I click on Hello anchor, then Bye anchor should get focused. If I click on Bye anchor then Foo anchor should get focused.
You can get the index of the clicked link and call .focus() on the next element in the array:
var $links = $('table a');
$links.on('click', function() {
$links.eq($links.index(this)+1).focus();
});
https://jsfiddle.net/qcbozbyn/1/
How about working with jquery Next() and prev() methods
$("table tr td a").click(function(){
var me = $(this) ;
var nextElm = me.closest("td").next();
if(nextElm.length>0){
nextElm.find("a").css("color","green");
}
else{
var prevElm = me.closest("td").prev();
if(prevElm.length>0){
prevElm.find("a").css("color","red");
}
}
});
JSfiddle link: https://jsfiddle.net/7fw2oeLm/
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 loop that display buttons with class name that has javascript on it. I need to pass the id of span that is clicked. My problem is because of the loop there, I can get the ID by its index but what I want to get is the id of the clicked button dynamically.
while(...){
<span class="id">'.$table["id"].'</span>
<input type="button" class="edit" value="Edit"/>
}
$('.edit').on('click', function (e) {
var x=document.getElementsByClassName("id")[0];
var xx = x.innerHTML;
$.fancybox({
...
}
});
});
sounds like you want to use
var x= $(this).closest("span");
that should get you the span next to the button clicked.
Could you use just $(this). within your click event?
You don't need to do this:
var x=document.getElementsByClassName("id")[0];
just say
var x = $(this);
because you are already on your element there, when the click event happens.
Hope it helps! :)
I would go with data attributes for passing variables, so you can leave classes for css style purposes only. Also if you are already using jQuery why not going all the way with it?
while(...){
<span class="id" data-id="id">'.$table["id"].'</span>
<input type="button" class="edit" value="Edit" data-target="id"/>
}
$('.edit').on('click', function (e) {
var data = $(this).data('target'); // Get the data-target attribute
var target = $('*[data-id='+data+']'); // Find the matching span
var xx = target.html(); // Get HTML from Span
$.fancybox({
...
}
});
});
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
Im having a table with 3 rows, with inputs where you can fill values in.
Now I have a link in the last tr, that says "+ More".
The "+ More" link, should if worked as expected, clone the above tr and append it above the link.
This is how far I am:
http://jsfiddle.net/9s8LH/2/
$(document).ready(function(){
$('.appendRow').bind('click', function(){
var $table = $(this).closest('table');
var $tr = $(this).closest('tr');
var $trAbove = $(this).prev('tr');
$table.append($tr.clone());
});
});
I tried to use prev('tr') to grab the TR element before the one I am inside, but it does not really work.
The second issue is that it appends under the +More TR, and not above it.
How can this be done?
The reason that $(this).prev('tr') doesn't work is that your appendRow class is on the link, not the row. There is no tr immediately prior to the link, prev looks at the previous sibling element (sibling = within the same parent) to see if it matches the selector. It doesn't scan, and it doesn't go up the hierarchy.
You're pretty close though, see comments: Updated Fiddle
$(document).ready(function(){
$('.appendRow').bind('click', function(){
// First get the current row
var $tr = $(this).closest('tr');
// Now the one above it
var $trAbove = $tr.prev('tr');
// Now insert the clone
$trAbove.clone().insertBefore($tr);
});
});
Note the use of insertBefore, which will insert the clone before the current row.
Try to use on() for dynamically added elements and you HTML should be like,
HTML
<table class="extraBookingBox">
<tr><td>Fees</td><td>Amount</td></tr>
<tr>
<td><input type="text" style="width: 40px;" name="cancelfee_price[]" />€</td>
<td><input type="text" style="width: 40px;" name="cancelfee_price[]" />€</td>
</tr>
<tr>
<td colspan="2">+ More</td>
</tr>
</table>
SCRIPT
$(document).ready(function(){
$(document).on('click','.appendRow', function(){
var $tr = $('table tr:nth-child(2)').clone();
console.log($tr);
$tr.insertBefore($('.appendRow').closest('tr'));
});
});
Demo
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