How do I reference a child of an eq() jquery - javascript

I have a table I'm trying to derive a JSON object from using the below code
var tbl = $('#myTable tr:has(td)').map(function(i,v){
var $td = $('td', this);
return{
id:$td.eq(0).text(),
column1:$td.eq(1).text(),
column2:$td.eq(2).text()
}
}).get();
This works perfect except from one thing, I sometime have a textbox or checkbox inside a td whose value I need to retrieve. I've Google'd and searched StackOverflow but I could not find any that worked in this situation
I have also tried the follow with no luck
id:$td.eq(0).val()
id:$td.eq(0).childern().val()
any suggestions or advice would be greatly appreciated

You'll probably want to find the input if its something like a textbox:
$td.eq(0).find('input').val()
for a checkbox, use the pseudo-selector :checkbox and determine its checked property
$td.eq(0).find(':checkbox').prop('checked')

If you need value and text then use something like this:
id:$td.eq(0).find(':checkbox').attr('value') + $td.eq(0).text();
If you need value only then:
id:$td.eq(0).find(':checkbox').attr('value');
By the way, jQuery team recommended (check comments below) using .find() instead of $(target, context);
In your example:
var $td = $('td', this);
should look like:
var $td = $(this).find('td');

Related

How can I get nth table column value in Javascript

How can I get nth table column value? Ie. I would like to get 2nd column value.
The first one I get in this way - it works fine, but the nth(2) does not work:
$('body').on('click', '.confirmation1', function(e) {
e.preventDefault();
var produktNazwa = $(this).parents("tr").find("td").first().html();
var produktWaga = $(this).parents("tr").find("td").nth(2).html();
console.log(produktNazwa, produktWaga);
});
Any hints on this please? Thanks.
There is no .nth() in jQuery. Instead you can try with .eq():
Reduce the set of matched elements to the one at the specified index.
var produktWaga = $(this).parents("tr").find("td").eq(2).html();
OR: You can include :eq() as part of the selector:
var produktWaga = $(this).parents("tr").find("td:eq(2)").html();
I don't recall having nth function in jQuery. I might be mistaken, but not that I know of. What you probably want is eq()
var produktWaga = $(this).parents("tr").find("td").eq(2).html();

Find element within a jQuery clone

I'm working on an app where I need to clone a table, then access the td and tr independently, depinding on their attributes or classes within this table.
Is there an easy way to accomplish this with the classical jQuery selector or do I need to write a whole new function ?
Code :
JS
var grid = $("table").clone();
console.log($(grid).$("td"));
Assuming you're starting with just one table, the following selector string will find all the rows in that table (as you know).
$("table tr")
but if you're referencing your table with a variable you have to use the find operator with the remainder of the original selector string instead, e.g.
var $table = $("table");
$table.find("tr")
I'm prefixing my variable with a $ as a note-to-self that it's already a jQuery object, i.e. there's no need to $($table).
You can work with the clone in exactly the same way:
var $clone = $("table").clone();
$clone.find("tr")
Yes you can use the clone just like a regular jQuery selector. For your example it would be
var grid = $("table").clone();
console.log($(grid).find("td"));
or even
console.log(grid.find("td"));

jQuery Each Incremented Counter vs. Selectors

I just finished an aspect of my project that required looping through the rows of an HTML table and depending on the class of the td, do something with the text. I approached the issue with two different methods and now I'm wondering which is considered best coding practice. Also, is there an advantage to using one method over the other?
Method 1:
$('#table tr').each(function(){
var something = $(this).find('[class*=someClass]').html();
//Do something with 'something'
});
Method 2:
var x = 0;
$('#table tr').each(function(){
var something = $(this).find('.someClass' + x).html();
//Do something with 'something'
x++;
});
This may be more opinion-based, but personally, I would do this:
$('#table tr').each(function(i){
var something = $(this).find('.someClass' + i).html();
//Do something with 'something'
});
The index of each element is passed as an argument.
Edit:
To expand on what Karl-AndréGagnon said, the two '.someClass' selectors will behave differently. In the first example, they will select all elements with 'someClass', regardless of any numerical suffix. The second example will only select the classes with the specified numerical suffix.
If you are doing the same thing to each '.someClass' element, regardless of the number on the class, you may not need an "each" at all, and could just start with a selector such as:
'#table tr [class*=someClass]'

How do I access elements in jquery if the id is based on one of the function arguments?

I am trying to access an element in jquery using a function input. To clarify, here is an example of what I have tried that isn't working:
function openReceivedMessage(messageid)
{
// ajax post query that is executing fine
// set row to not be highlighted
var rowid = 'receivedrow' + messageid.toString();
document.getElementById(rowid).style.background-color = "#ffffff";
// other code that is executing fine
}
Essentially, this is for a message inbox page. I have displayed the messages in a table, and, as the number of messages changes for each user, I used a loop to populate it. In order to open a message, I have hoped to use a jquery function (titled above), and so when the loop populated the tables, I set it so that each of the different subject lines would, onclick, execute the above function with the unique messageid passed in as the argument. Upon opening, I want to change other things in the table (that I named, similar to the message function, as things like 'receivedrow#' where # is the messageid.
Would hugely appreciate any help here, I feel like there must be a simple way create a string (like I did with rowid above) and access the element with that id (in the table there is a row with id="receivedrow#" that I want to adjust the css of).
I recommend using jQuery to find the element
var rowid = 'receivedrow' + messageid.toString();
var $el = $("#" + rowid);
Then simply operate on $el
$el.css({'background-color':'#FFFFFF'});
If you're having trouble still, I recommend checking that rowid is correct and that the jQuery is then giving you the right element back.
function openReceivedMessage(messageid)
{
var rowid = 'receivedrow' + messageid.toString();
var $el = $('#'+rowid);
$el.css({'background-color':'#FFFFFF'});
// other code that is executing fine
}
Seems what you have posted is not jQuery at all :D
It is simple JavaScript trying to get a DOM element with id rowid. It does not works maybe be because of following two reasons:
there is no element with id rowid which you can easily verify.
background-color is not a property its backgroundColor.
Try using this:
document.getElementById(rowid).style.backgroundColor = "#ffffff";
If you what you really need is an easy way get the id onclick, then simply use the this keyword in your row markup.
onclick="openReceivedMessage(this);"
Then access in your function as such:
function openReceivedMessage(row)
{
// set row to not be highlighted
var rowid = 'receivedrow' + row.id;
$('#' + rowid).css({'background-color':'#ffffff'});
}

HTMLInputElement has no method 'val'

I'm looping through cells in a table row. each cell has a text box in it, and I want to take the value of the text box and push it onto an array.
function dothing() {
var tds = $('#'+selected+' td');
var submitvals = new Array();
tds.each(function(i) {
var val = $(this).children('input')[0].val();
submitvals.push(val);
});
}
Theres more to the function, but this is all that is relevant. For some reason, when I run this code, I get "HTMLInputElement has no method 'val'." I thought that input elements were supposed to have a val() method in jQuery that got the value so this makes no sense. Am I missing something, or doing it wrong?
val() is a jQuery method. .value is the DOM Element's property. Use [0].value or .eq(0).val()....
.val() is a jQuery function, not a javascript function. Therefore, change:
var val = $(this).children('input')[0].val()
To:
var val = $(this).children('input:eq(0)').val()
function dothing() {
var tds = $('#'+selected+' td');
var submitvals = new Array();
tds.each(function(i) {
var val = $($(this).children('input')[0]).val();
submitvals.push(val);
});
}
.val() is a jquery method. Using [0] returns the DOM element, not the jquery element
var val = $(this).children('input:first').val();
What I don't understand, is why none of the suggested syntaxes on this or other questions similar to this seem to work for me. I had to do trial and error and eventually had to use:
MySelectElement.value = x;
It also didn't help that the Visual Studio Intellisense suggestions offer a whole other range of unworking method names, such as ValueOf().

Categories

Resources