Retrieving checkbox status in an HTML table using JavaScript - javascript

I'm trying to remember the syntax for getting an element inside a table using JavaScript. I have a table with a checkbox in it. These are dynamic checkboxes or i would just use the getElementById. Here is how I'm doing it. I know I'm close, but just figured it out yet. Here is the code I have so far:
table_name.rows[0].cells[0].item[0]
or
tbl_run_avail.rows[1].cells[0].elements[0]

Since you're using DOM Level 0, you're probably looking for the childNodes property:
table_name.rows[0].cells[0].childNodes[0];
The above assumes that the check box is the very first child node of your table cell. In this situation, you can avoid unnecessary indexing by using the firstChild property:
table_name.rows[0].cells[0].firstChild;

It's easy if you use the children property:
yourTable.rows[0].cells[0].children[0];

Related

.eq() out of order

I'm trying to select the 3rd element of a JQuery object, by using eq() method. But for some reason the 2nd and 3rd selections pop out in changed order:
var selection = $("[name=input0], [name=input1], [name=input2], [name=input3]");
selection.eq(1); //turns out to be input2!!
What could be the reasons for this behavior? Can I trust acessing it by index in my script?
According to:
https://api.jquery.com/multiple-selector/
The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.
With the help of the answers and comments and a bit of reading on the documentation.
Turns out that jQuery selects elements in the order they appear in the DOM (HTML), so:
Using a direct array access to a jQuery selection will work if you use that order, but you can only trust it if you are also responsible for the HTML, and you would need to remember this if you are ever going to change the layout.
Bottom line: not the best way to select a specific element.

Element duplicates when append

At first, I'm trying to create a basic tcg in jQuery, Ajax and PHP.
The following fiddle is my try to append the card to empty places and change the data attribute value, but When I click in a card, it creates other "cards" and the value doesn't changes.
http://jsfiddle.net/bNB89/1/
The code I tried to use for data changing:
$(this).data('place', 'field');
How can I fix this?
The problem in your code is that you are using append in a class, so the content is being created in every element containing that class. You should instead fetch for the first element with the class, append to it and then remove the class so it won't be selected again. I set up a fiddle demonstrating it http://jsfiddle.net/bNB89/2/
You get other cards because there are multiple .myslot elements and each one will get a copy.
Use a selector that will give you one item to append to. e.g. .myslot:empty:first.
.data() does not change data attributes it uses its own internal mechanism to store the data. If you really want to change the attribute you can use attr.
http://jsfiddle.net/bNB89/3/

Select element inside a cloned element variable

I have cloned an element using clone():
var clone = $('#orig').clone();
The clone works fine, but I having some trouble trying to select elements inside it by ID.
All nested elements have the same ID as the original ones, and I need to manipulate some before appending them to the page...
I am trying something like this for example:
alert(clone.filter("#Full").attr('id'));
Could you help me on that?
The snippet you provided in your question works fine!
Just replace filter with find.
See this fiddle: http://jsfiddle.net/Pkv7S/
However, yes, you should be wary of duplicate IDs.
Try this way
var clone = $('#orig').clone();
clone.attr('id','orig1');
check it here http://jsfiddle.net/3tWks/
Firstly, use classes instead of IDs. IDs should always be unique within a document, and may result in unpredictable behaviour if cloned (if you want the cloned elements to have IDs, by all means assign new ones when you clone!)
That said, you want to be using .find instead of .filter to find elements nested within your clone element:
clone.find(".myClassName")
/* or */
clone.find("#Full")
.find – jQuery Docs

Accessing a parent added via wrap function

I have an input field fld. I wrap this field inside a div in one part of my code.
input.wrap('<div>')
In another part of the code I obtain the field 'fld' which is a jQuery object.
fld.el contains the input field.
Now, I want the div I previously wrapped around this fld.
fld.el.parent() does not work for me. Nor does fld.el.parents(). Tried fld.el.closest('div') with no luck.
If I load the input element again via id, I am able to access the parent objects.
$('#'+fld.id).parent() works. But I do not want to introduce any ids.
Any way in which I can just make use of the fld.el I have and obtain the parent?
What's the ".el" in fld.el.parent() about? Try fld.parent().
Not 100% sure but try:
parentdivs = fld.el.parents("div:first");
OR
parentdivs = fld.parents("div:first");
This will get your first parent div of an item
Without seeing your code and based on the behavior you're describing, I would guess that fld.el is not a jQuery object.
Try:
$(fld.el).parent();
If you're 100% certain it is a jQuery object (and the above doesn't work) you should post your code, or at least recreate your issue using jsfiddle.net

How to iterate a gridview by javascript

Suppose my gridview has a few rows and every row has a few textboxes. I want to iterate the gridview with JavaScript to read the value of each textbox. How easily can I achieve it by plain JavaScript or jQuery? I want a cross browser solution.
Definitely use jQuery. I use a couple of different jQuery selectors below. This should give you a general idea of how to accomplish your goal.
$('#gridviewId').find('.textClass').each(function () { alert($(this).val()) });
The above code would use the grid view's id and then would find all of the descendant elements with a particular class (in your case textboxes) alerting their value. I've added a working example at: http://jsfiddle.net/GWAAC/.
use jQuery. If you know the class or ID of the elements you need, a simple selector will return all of them

Categories

Resources