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');
Related
I'm having some difficulty with this. In Backbone, I have a function like this:
functionOne: function(){
$('#myTExtbox-' + budgetLine.attr('id')).on('change keyup paste', function(){
that.mySecondFunction(this);
});
}
In this case, the this is a textbox, which is in a table, inside a div. Then:
mySecondFunction: function(tb){
var tbody = tb.parentElement.parentElement.parentElement.parentElement.parentElement;
//gets main parent, which is a tbody, inside a table, inside a div
}
I then want to iterate over tbody, to go through each row and find a textbox in a specific cell. The problem is that this code:
$.each(tbody, function(index, item){
cost = item;
var t= index;
});
Doesn't seem to allow me to get to any of the items. In this example, if I try to do something like:
item.getElementById('test');
I get an error:
TypeError: Object #<HTMLCollection> has no method 'getElementById'
Why can't I iterate over this object and access objects within?
Thanks
UPDATE
Here's a fiddle: http://jsfiddle.net/HX8RL/14/
Essentially, what should happen is this: When a text box changes, I want to iterate over all the rows in the tb's parent table and sum all the Tb values. Keeping in mind, all the tb's in the same cell position, as there could be other tb's in other places that I dont want to include.
There wont be any collection of TBody
try using children() instead
$.each(tbody.children('tr'), function(index, item){
cost = item;
var t= index;
});
Demo Fiddle
Iterate over all input elements directly to get values.
var tbody = tb.parentElement.parentElement.parentElement;
alert(tbody.id);
var input = $('#tbody').find('input');
alert(input);
console.log(input);
for (var i = 0; i < input.length; i++) {
alert(input[i].value);
alert(i);
}
See fiddle-http://jsfiddle.net/HX8RL/18/
I think there are a few things going wrong here. You know you can only have one ID per page? So you have to do document.getElementByid('test') instead.
Since you are also using jQuery you can use the find function, item.find('#test'). But I think this wouldn't solve you problem. Not sure what you want to achieve, maybe I can help you if you explain a bit more in detail what your problem is.
Also
tb.parentElement.parentElement.parentElement.parentElement.parentElement;
can be written as (in jQuery)
$(tb).parents('tbody');
I've setup a fiddle, maybe it can help you.
Code used in fiddle:
var myFuncs = (function() {
function funcA() {
$('input').on('keyup', function() {
funcB(this);
});
}
function funcB(myInput) {
var $table = $(myInput).parents('table');
$table.find('tr > td > input').each(function() {
var $input = $(this);
if($(myInput).attr('id') != $input.attr('id'))
$input.val("I'm called from another input");
});
}
return {
funcA : funcA
}
})();
myFuncs.funcA();
I need to find exactly that td row which contains value priview '2'
I know the td row first half id, but it is dynamic: MovementNumber_M_* (Where * can be from 1 to Milion)
So need to search all rows from MovementNumber_M_1 to MovementNumber_M_9999 which contains MovementNumber_M_*.value=2 and returning directly that td row id which contained that value.
Can you help me? Thanks in advice.
Right and helpfull answers guaranteed ;)
//EDIT
function DgIdOnClick (e,r){
var MovementNumber = document.getElementById(e).value;
//alert('MovementNumber: '+MovementNumber+' Type :'+r);
var result = $('[id^="MovementNumber_M_"][value='+MovementNumber+']');
result.each(function(){
alert($(this).attr("id"));
});
}
OK value=1 is for init and thats why are alerting all rows but if value is 2 then jq is not finding him WHY ?
The function DgIdOnClick is inicialized #
$( document ).ready(function() {
var SecondDiagnosis=$( "span[id^='lov_Dg2Id_D_']" );
var SpanBlock2=SecondDiagnosis.find('a');
var eventH2=SpanBlock2.attr( "onclick" );
SpanBlock2.attr("onclick", "DgIdOnClick(document.getElementById('MovementNumber_D_'+parentElement.getAttribute('id').substring(12)).id,2);"+eventH2);
var FirstDiagnosis=$( "span[id^='lov_DgId_D_']" );
var SpanBlock=FirstDiagnosis.find('a');
var eventH=SpanBlock.attr( "onclick" );
SpanBlock.attr("onclick", "DgIdOnClick(document.getElementById('MovementNumber_D_'+parentElement.getAttribute('id').substring(11)).id,1);"+eventH);
});
function DgIdOnClick is on other .js file
If i am alerting IN DgIdOnClick alert(document.getElementById('MovementNumber_M_2').value)//MovementNumber_M_2 Then value is 2 but jq is not founding it
This alerts the ID's of each row containing that value
var result = $('[id^="MovementNumber_M_"][value="2"]');
result.each(function(){
alert($(this).attr("id"));
});
http://jsfiddle.net/q8QaG/
Update:
This alerts the id of all inputs with the value of 2, even on input update
$("#button").click(function(){
$('[id^="MovementNumber_M_"]').each(function(){
var value = $(this).val();
if(value == 2){
alert($(this).attr("id"));
}
});
});
http://jsfiddle.net/q8QaG/3/
$('#TableID').find('td').filter(':contains("SOME_TEXT")');
The previous 2 answers have the string encoding similarly incorrect. This should be it:
$('[id^="MovementNumber_M_"][value="2"]');
You can use combination of Attribute Starts With Selector [name^="value"] and Attribute Equals Selector [name="value"]
var myElement= $("[id^='MovementNumber_M_'][value=2]");
As per comment, if you need id use attr()
var myElementId = $("[id^='MovementNumber_M_'][value=2]").attr('id');
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
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
I'm trying to populate featured with data then append it to #wrapper. This isn't working for me. What am i doing wrong?
var featured = '<div id="featured"></div>';
$('#imageTable tbody tr td img').each(function(){
$(featured).append($(this).attr('src'));
});
$(featured).appendTo('#wrapper');
var $featured = $('<div id="featured"></div>');
$('#imageTable tbody tr td img').each(function(){
$featured.append($(this).attr('src')).append('<br />');
});
$featured.appendTo('#wrapper');
Explaination:
When you do this inside the loop $(featured), it creates a NEW div for each selected element, so only the last div will be appended to your #wrapper. You need to create the jQuery object outside of the each loop.
It's because you have the $(featured) call inside the loop. You only want to call it once.
Try this:
var $featured = $('<div id="featured"></div>');
$('#imageTable tbody tr td img').each(function(){
$featured.append($(this).attr('src'));
});
$featured.appendTo('#wrapper');
Very Similar to Bryan Ross's, just creating the div in a more efficient manner. It may not be as straight forward, but I believe it is more performant.
var $f = $('<div>',{id:'featured'});
$('img,#imageTable > td').each(function(i){
$f.append($(this).attr('src');
})
$f.appendTo('#wrapper');