ansaurus

Question

Table filtering in jquery - a more elegant solution please

Answer 1

+1 A:

Pointy 2010-06-13 20:25:44

Thanks for your answer, but your code doesn't seem to pluck the target correctly. If i look at the variable "target" it returns "toggler target:ac_cal" rather than just "ac_cal", which I think was the desired effect.

Neil Burton 2010-06-13 20:38:30

I have to ask, why am I seeing `[this.checked ? "show" : "hide"]()` everywhere today instead of the shorter/simpler built-in methods, e.g. `.toggle(this.checked);`?

Nick Craver 2010-06-13 20:48:49

@Neil doh sorry I'll fix that -- @Nick you're probably right but personally I distrust ".toggle"; irrational I know

Pointy 2010-06-13 20:55:48

more: @Nick I distrust "toggle" because I want to be sure that I've got solid correlation between the "checked" state of the toggler and the current visibility of the controlled element. I know that they *shouldn't* get out of sync, but it makes me happier to lock it together more explicitly.

Pointy 2010-06-13 20:58:16

@Pointy - `.toggle()` takes a boolean, on of off like I have, that's why I ask, it calls `show` or `hide` internally already. You can see the internals here: http://github.com/jquery/jquery/blob/master/src/effects.js#L90

Nick Craver 2010-06-13 21:00:10

@Nick duhhhhhhhhhh of course you're right as usual :-)

Pointy 2010-06-13 22:19:27

Answer 2

+1 A:

You can reduce your code (without changing markup) down to this:

$("[id^='toggle_'").click(function() {
  $("." + this.id.replace('toggle_','')).toggle(this.checked);
});

Though, if you gave your toggle elements a class instead, like .toggle you can clean up the original selector, like this:

$(".toggle").click(function() {
  $("." + this.id.replace('toggle_','')).toggle(this.checked);
});

You could also give them a class and use the value as the target class, like this:

<input type="checkbox" class="toggle" value="ac_cal" />

Then your jQuery is just this, short and simple:

$(".toggle").click(function() {
  $("." + this.value).toggle(this.checked);
});

Nick Craver 2010-06-13 20:43:22

+1 Beat me by 30 seconds :)

fudgey 2010-06-13 20:44:56

@fudgey - Thanks :) Just curious, why the interest in `[this.checked ? "show" : "hide"]()` today over `.toggle(this.checked);`?

Nick Craver 2010-06-13 20:47:48

This seems the most elegant solution to me. Many thanks for your input. I'm a relative newbie to javascript / jquery, so love to learn there's always a better way.

Neil Burton 2010-06-13 20:49:35

@Nick Craver: I copied that part from Pointy because it was cleaner than what I had. Personally I avoid using toggle for personal reasons, mostly because it likes to act up on me - I think I'm cursed LOL.

fudgey 2010-06-13 22:37:16

@Neil Burton: "better" is subjective as there are many different ways to do the same thing as you can see from your answers; that being said, if Nick has an answer, chances are it's the best ;)

fudgey 2010-06-13 22:42:32

Answer 3

A:

Try this (demo):

HTML (the id should match the classes in the table):

<input type="checkbox" id="ac_cal" checked="checked" />CAL<br/>
<input type="checkbox" id="ac_quo" checked="checked" />QUO<br/>

Script:

$(document).ready(function () {
    $("input[id^=ac]").click(function()                
    {
        $('tr.' + this.id)[this.checked ? "show" : "hide"]();
    })       
});

fudgey 2010-06-13 20:43:47

ansaurus

tags:

views:

answers:

Table filtering in jquery - a more elegant solution please

related questions