toggleClass works only on td and not whole tr - javascript

I am using a datatable whch has a checkbox on each row..
When the checkbox will be clicked, the total will have a class called "selected"
so here is my code which i have put
$("#domains_list").find("input[name=\'chk[]\']").on("click",
function()
{
$(this).closest("tr").toggleClass("selected");
});
But the problem is, instead of getting the whole as class selected, only particular td is getting highlighted.
Here's a screenshot
so, how can i solve this issue, is there any way?

As Zougen pointed out, your JS is correct - that is why the td next to the input is being colored and not the td containing the input itself. The other tds wont get highlighted probably because your CSS is being overwritten.
One thing though: your selector looks a little bit strange:
.find("input[name=\'chk[]\']") here you dont need to escape the single ' since your string delimiters are " anyways, just write:
$('td input[name*="chk"]').change(function() {
$(this).closest('tr').toggleClass("selected");
});

i have achieved the same purpose by following jQuery code, i hope this will solve your problem as wel.
$(function() {
$('td:first-child input').change(function() {
$(this).closest('tr').toggleClass("selected");
});
});

Related

Edit HTML Table Data cell using Jquery

I have an HTML table, and each cell of the table will have two data attributes. What I'm trying to do is set a button to switch the value being shown in the table between those two attributes.
<table class="table1">
<tbody>
<tr>
<td data-original="A" data-new="B"> A </td>
</tr>
</tbody>
</table>
I'm able to set new text and get attributes outside the table, but whenever I try to within the table I keep receiving an error:
'Uncaught -> TypeError: undefined is not a function'.
I've been receiving this error for a number of commands $('td').text(), .val(), .attr('td'), .getAttribute().
Am I missing a plugin or something for getting and setting values from tables?
ANSWER: I figured out the reason, I was an idiot and didn't mention that there would be numerous TD elements with repeating tags. I eventually used Underscore.js's each method to iterate through them and parts of the below answer to swap the values.
Just made a Fiddle:
$("button").on("click", function () {
$("td").text($.trim($("td").text()) == $("td").data("original")
? $("td").data("new") : $("td").data("original"));
});
to switch between the data-original and data-new values by checking the current text in the td and using a ternary operator.
By using trim() for the initial text issues in case of whitespace are taken care of (as I just noticed that you have whitespace in your example td).
Just in case the button isn't already in the DOM when the page is initially loaded, you have to adjust the on() to delegate the click event from a static parent element to the button, e.g. like this: $(document).on("click", "button", function () { ...
Instead of $(document) every other static parent element can be used.
And as you mentioned that the table will have multiple tds with data-attributes, I've just adjusted the Fiddle to take care of that:
$("button").on("click", function () {
$("td").each(function () {
$(this).text($.trim($(this).text()) == $(this).data("original") ?
$(this).data("new") : $(this).data("original"));
});
});
I don't know how .text() didn't work for you.
To set text inside td elements, you use .text(). To get the data inside data-current or data-new, jQuery has a handy function .data(tag), for example $(sel).data('current').
Here's a fiddle displaying usage of this on your problem.

How do you find out if any select menu have been put into focus?

I am trying to limit query calls using a function that will place edited items into an object then pass them to a PHP script to update only the edited information. In this case I am using jQuery's change() function, however I can not find a pseudo selector for select menu's (ie. :input, input:checkbox). The only idea I have left is to add a class to all the select menu's and go from there like so:
$(":input, input:checkbox, .selectedMenu").change(function() {
//Some Code here
});
I have checked all over and cannot find any information on this. Would this be the best way or is there an alternative?
Problem: How can you find out if any select menu has been put into focus using a pseudo selector or anything on those lines?
Select is its own tag. You don't need a psuedoselector:
$("select").change(function () { ... });
I think that all you want to do is use the select box that was changed, in this case you can do this
$(":input, input:checkbox, .selectedMenu").change(function() {
var $el = $(this);
alert($el.val());
});
you can add a focused class:
$(":input, input:checkbox, .selectedMenu").change(function() {
$(".focused").removeClass("focused");
this.addClass("focused");
//Some Code here
});
I would put this as a comment but I'm not allowed to... Maybe I misunderstood your question, but what about:
$(":input, input:checkbox, select")

.val() as part of the selector

I have 5 different tables with the ids *table_1,...,table_5* with the class *table_class* and a selection which with the value 1,...,5.
Example:
I wanted that when in the selection the option 4 is selected that all the tables are hidden, except the table with the id table_4. I'm able to hide them aso. But I'm unable to combine the .val() with the name, so that i can get the name table_4 as selector...
$("#tables_"+$(this).val()).show();
Could please someone help me...
Thanks
Put your selecter id instead of this.
$("#tables_"+$('#myselecter').val()).show();
It might not be the safest way to do it, but yes, your code works fine. Demo
$('select').change(function() {
$('table').hide();
$('#table_' + $(this).val()).show();
});

Display number of checked checkboxes in jQuery

I am quite new to jQuery, I think this might be quite easy for many of you, but I can't seem to make it work. How can I display the number of checkboxes so that the value increases or decreases.
i tried the following but with the number in the span tag remains 0: http://jsfiddle.net/yunowork/NTwxc/
Thanks
You should listen to the change event:
$('input[type=checkbox]').on('change', function(){
var number = $('input[type=checkbox]:checked').length;
$('.totalchecked').text(number);
});
http://jsfiddle.net/NTwxc/7/
Note that val is used for getting/setting values of form elements, for other elements like span element, text or html methods should be used.
Number of checked checkboxes:
$(":checkbox:checked").length
http://api.jquery.com/checked-selector/
edit: I see in your fiddle that you already had that. I'll leave it there, since that's actually the answer to "how to display the number of checked checkboxes"...
The problem is that you're not updating and looking to see how many are checked. You need to re-run that function whenever any of the items are checked.
$(":checkbox").change(function () {
// update the span with $(":checkbox:checked").length ...
});
You shouldn't be setting .val of a span, but .text.
Also, you need to update it every time the checked state changes.
function calc() {
$('.totalchecked').text($(':checkbox:checked').length);
}
$(calc);
$(':checkbox').change(calc);
Demo
Here we are!
$('input[type="checkbox"]').change(function() {
$('.totalchecked').empty().text($('input[type="checkbox"]:checked').size());
});
http://jsfiddle.net/toroncino/PTvG8/
Problems: .val() is for form elements only. To set the content of an element, use .text() or .html() if you are inserting HTML. Second problem is that you need to register a listener to "change" events. Otherwise, the value won't update.
Updated solution: http://jsfiddle.net/NTwxc/4/
$("input[type=checkbox]").change(function(){
var number = $('input[type=checkbox]:checked').length;
$(".totalchecked").text(number);
});
​
By the way, I would personally prefer input[type=checkbox]rather than :checkbox. The former works for both CSS and jQuery.

Finding the next input (of a parent?) with jQuery

I've got a checkbox inside a table, and when you click on it, it'll change the background colour accordingly like so...
$("#table tr td :checkbox").bind("click change", function() {
$this = $(this); // cache the jquery object
if($this.is(':checked')) { $this.closest('tr').css('background-color', 'lightyellow'); }
else { $this.closest('tr').css('background-color', '#fff'); }
});
That works just fine, however, I figured I'd like to go one better, so anywhere on the table row you click, it'll check the box and highlight the row.
I tried using this code, but it doesn't work unfortunately:
$("table tr").bind("click", function() {
$(this).parents("tr").find(":checkbox").attr('checked');
});
And here's the HTML code (removed excessive stuff to improve readability...
<td>Name</td>
<td>Description</td>
<td><input type="checkbox"></td>
Any help would be very much appreciated, thank you!
The event your handling is the tr click.
The parent is the table so that will not help. All you need to do is use find() from the this context.
I would use .live to avoid multiple event handlers when one will do.
Assuming you only have one checkbox in the row then use the following.
(note it uses tr's inside tbody to avoid running this on thead rows)
$("table>tbody>tr").live("click", function() {
$(this).find(":checkbox").attr('checked', 'checked');
});
UPDATE
If you want to toggle it try something like
$("table>tbody>tr").live("click", function(ev) {
var $checkbox = $(this).find(":checkbox");
//check to see we have not just clicked the actual checkbox
if ( !$(ev.target).is(':checkbox') ){
$checkbox.is(':checked') ? $checkbox.removeAttr('checked')
: $checkbox.attr('checked', 'checked')
}
});
You want to change this:
$(this).parents("tr").find(":checkbox").attr('checked');
to this:
$(this).parents("tr").find(":checkbox").attr('checked', 'checked');
Otherwise all you're doing is reading the checked attribute, not setting it.
I think you are just forgetting to set the value of the attribute.
$("table tr").bind("click", function() {
$(this).find(":checkbox").attr('checked', 'checked');
});
The jQuery Docs on Attributes might be of some assistance.
Credit to redsquare for noticing that the .parent("tr") is not needed.

Categories