|
|
|
|
|
|
|
|
|
|
Actually, it looks like you're binding them to checkboxes. Which did you intend?I am using jquery and I am trying to bind events to my table rows.
Originally posted by Bear Bibeault:
Actually, it looks like you're binding them to checkboxes. Which did you intend?
In any case, rather than apply the listener to each row (or checkbox) individually, it'd be a lot easier and much more efficient to just apply a single handler to all rows. Something like:
Within the handler, the element that triggered the event will be available as the function context (this), so there's no need to have to pass individual ids as you were attempting. Once you have the target element, you can use the jQuery selectors and methods to find any related element (parent, siblings etc) if necessary.
[ June 11, 2008: Message edited by: Bear Bibeault ]
Originally posted by Bear Bibeault:
One of the problems with doing things this way is that you lose the function context (this) when you simply call another function from the listener. Why bother to define a separate named function? The only time I'll create a named function is when it needs to be explicitly called from more than one place.
Rather, put the code directly in the listener.
So your function has a number of problems. First, "this" is no longer the target element. Another problem is your use of this selector "td > input:checkbox" which selects all input checkboxes that are direct children of <td> elements. Any this-ness is not accounted for (even if this pointed to the right thing).
Is that enough of a clue to loosen things up?
Hint: the parent() or parents() methods may prove helpful.
Also remember that you can limit a selector expression to a subtree of the DOM by passing the subtree root as the second parameter to $().
[ June 11, 2008: Message edited by: Bear Bibeault ]
Also remember that you can limit a selector expression to a subtree of the DOM by passing the subtree root as the second parameter to $().
$(this).siblings("input:checkbox").attr("checked")
This does not work.
So to me this is saying. if anything in this(referring to the tr tag) is a sibling and has a input box of a checkbox that has been check.
Originally posted by Bear Bibeault:
First, be sure that you know what "this" is referring to. Is it the <tr> or the <input>? If the <tr>, then siblings() isn't the correct call, right? But let's a assume that siblings() is correct. Then, the statement:
will return a wrapped set of all siblings that match "input:checkbox". But then you add .attr("checked") which returns the value of the "checked" attribute for the first matched element. Not exactly what you meant, I think.
Rather, what I think you wanted was:
Which will return all the sibling checkboxes that are in checked state.
will return a wrapped set of all siblings that match "input:checkbox". But then you add .attr("checked") which returns the value of the "checked" attribute for the first matched element. Not exactly what you meant, I think.
Originally posted by Bear Bibeault:
Only apply the handler to the first checkbox.
Absolutely. I do it all the time.Originally posted by Michael Hubele:
However what happens if I did not have any plans to use css styles? Like could I still use a css class? would that be good practice?
$(this + " > input:checkbox").attr("checked", true);
Originally posted by Bear Bibeault:
But yeah, whatever it was, this won't do it!
Are you trying to limit the selector to descendants of this? If so:
$('input:checkbox', this)
$("td.selectEntireRow").click(function()
{
if ($(this).siblings("input:checkbox:checked"))
{
$('input:checkbox', this).attr("checked",true)
}
});
Originally posted by Michael Hubele:
So now I am trying to get each of the select row ones to select the reaming[sic] row.
No. The second parameter defines a subtree of the DOM that will constrain the selection.$('input:checkbox', this)
I don't get this what this is doing. I thought when you do that that is like doing and OR statement.
Firebug in Firefox will let you put statements like:Also is their a simple way I can print out what has been selected by this statements.
$('tr td:first-child :checkbox').click(function(){
if ($(this).attr('checked'))
$(":checkbox",$(this).parents('tr')).attr('checked',true);
});
$('input:checkbox', this)
No. The second parameter defines a subtree of the DOM that will constrain the selection.
But first, let�s examine a simple situation. Let�s say that we want to match all
<img> elements that have either an alt or a title attribute. The powerful jQuery
selectors allow us to express this as a single selector, such as
$('img[alt],img[title]')
$('tr td:first-child :checkbox').click(function(){
if ($(this).attr('checked'))
$(":checkbox",$(this).parents('tr')).attr('checked',true);
});
Trying to debug JavaScript without Firebug is like trying to cut diamonds wearing boxing gloves.
Yes I got to learn how to use Firebug I am having a very tough time figuring out what is going on.
Any good firebug jquery/javascript debugging tutorials?
Thanks
When you pass a second parameter to the $() function, it specifies the root of the DOM tree that will be searched. By default (when no such argument is passed), the topmost element of the DOM is used. Passing such an argument allows us to limit the part of the DOM tree that is searched for matches.Ok So when you say this definds a subtree of Dom what do you mean this.
$(":checkbox",$(this).parents('tr')).attr('checked',true)
Could explain whats going on here. I am not seeing how this works.
$( $(this).parents('tr'),":checkbox").attr('checked', true);
it would make more sense to me.
OK, the selector is ":checkbox". That will search for all inputs of type checkbox. However, we don;t want all the checkboxes on the page, just the ones in the same table row. So I pass $(this).parents('tr') as the 2nd parameter (as described above) to limit the search to the DOM tree starting at the parent <tr> of the clicked checkbox (whic is what "this" is referencing).
Then I apply .attr('checked',true) to check all the selected checkboxes on the row.
| Don't get me started about those stupid light bulbs. |
