jquery index in table

Question

Here's my table.. I want clean up the jquery so that I can use this logic on many rows in the table's html.

<table>                         
    <tr>
        <td class="check"><input class="select_service3 user_checkbox" type="checkbox"></td>
        <td class="name">NAME</td>
        <td class="duration">
            <span class="duration3">30 min</span>
            <a class="custom_duration_link3">Custom</a>
            <span class="custom_duration_input3"><input class="custom" type="text"> min <button class="custom_duration_save3">Save</button></span>
        </td>
        <td class="price">$25 <a class="custom_price_link3">Custom</a></td>
    </tr>
</table>

jquery

   $(".custom_duration_link3").hide();
   $(".custom_price_link3").hide();
   $(".custom_duration_input3").hide();

   $(".select_service3").click(function(){

    if ($(".select_service3").is(":checked"))
    {
        $(this).closest("tr").addClass("active");
        $(".custom_duration_link3").show();
        $(".custom_price_link3").show();

        $('.custom_duration_link3').click(function(){
            $('.custom_duration_link3').hide();
            $('.duration3').hide();
            $('.custom_duration_input3').show();
        });

        $('.custom_duration_save3').click(function(){
            $('.custom_duration_input3').hide();
            $('.duration3').show();
            $('.duration3').addClass("notused");
        });

    }
    else
    {
        $(this).closest("tr").removeClass("active");
        $('.custom_duration_link3').hide();
        $('.custom_duration_input3').hide();
        $('.duration3').show();
        $('.duration3').removeClass("notused");
        $('.custom_price_link3').hide();
    }
  });

What an I do to clean up this code and not have to do ".duration1", ".duartion2", etc...

Thanks for help.

Joseph Marikle · Accepted Answer · 2012-03-03 08:22:01Z

2

Basically, use the this object in your function to retrieve the active row. Then only reference class names within the scope of that row. Here's a quick demo:

http://jsfiddle.net/znxQk/

The idea is to use something like this:

var current = $(this).closest("tr");
$(".custom_price_link",current).show();

answered Mar 3, 2012 at 8:22

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

codef0rmer · Accepted Answer · 2012-03-03 08:53:52Z

I know that you got your answer but If you do not want to specify the selectors manually and their position is going to be same in future, then you can go with this.

if ($(".select_service3").is(":checked"))
    {
        $(this).closest("tr").addClass("active");
        $(this).parent()
            .siblings('.duration').children(':not(:last)').show().end()
            .children('a').click(function () {
                $(this).parent()
                    .children().hide().end()
                    .children(':last').show()
                    .children('button').click(function () {
                        $(this).parent().hide().parent().children(':first').addClass('notused').show();
                    });
            }).end()
            .siblings(':last').children('a').show();
    }
    else
    {
        $(this).closest("tr").removeClass("active");
        $(this).parent()
            .siblings('.price').children('a').hide().end()
            .siblings('.duration').children(':first').removeClass('notused').show().end()
            .children(':not(;first)').hide();
    }

Demo: http://jsfiddle.net/92cMj/

Collectives™ on Stack Overflow

jquery index in table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related