CODEWITHSUNDEEP
javascriptjqueryhtmlcss
pourmesomecode
pourmesomecode

Reputation: 4358

Toggling if a condition is met on table elements

I have a table. Each column has a button at the top. If the td elements below within the column have content in them, then hide the button. If not then display the button and onClick add class active too the td element.

$(document).ready(function (){
    $('.button-fill').on("click", function() { 
        var i=$(this).parent().index();

       if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")
           $(this).hide();
       else
           $(this).show();    
    });

<!-- Fill in the td -->
    $('.button-fill').on("click", function() {
      var i=$(this).parent().index();
        $(this).closest("tr").siblings().find("td:eq("+i+")").addClass("active");
      //});
  });
});

http://jsfiddle.net/ujw0u6au/

I've created a jsfiddle. I don't know what i'm doing wrong? Thank you

Upvotes: 1

Views: 289

Answers (3)

rusmus
rusmus

Reputation: 1665

@Vijay has the right answer, but as a side note, you need to change this:

if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")

to this

if($(this).closest("tr").siblings().find("td:eq("+i+")").text()!="")

if you want to hide the button when there is content, instead of the other way around (notice the != near the end).

Upvotes: 0

Prateek
Prateek

Reputation: 4500

I can see you are having two "click" event handler on same class. Instead of it, you can merge it as well.

Here is the optimized version of your code :

JavaScript : 

$(document).ready(function (){
    $('.button-fill').on("click", function() { //Only one click event handler
        var $this = $(this);
        var i=$this.parent().index();
        var $trSibling = $this.closest("tr").siblings();
        $this.toggle($trSibling.find("td:eq("+i+")").addClass("active").text() != ""); //adds the class as well and check the text as well.    
    })
    $(".button-fill").trigger("click"); 
    // explicitly clicking on button to make sure that initially button should not be shown if column text is not empty
});

JSFiddle link : http://jsfiddle.net/ujw0u6au/1/

Is this the same what you want?

Upvotes: 0

Vijay
Vijay

Reputation: 3023

Since you have bind the button toggle logic inside button click - you will always have the button in the starting. When you will click on the button only then it will first hide the button and then make the content active.

In case you want this behavior in the starting as soon as the page loads, you should change below line (the 2nd line in your code) from your code -

$('.button-fill').on("click", function() {

to

$('.button-fill').each( function(i,e) {

also, you should not use <!-- Fill in the td --> style of commenting in JavaScript.

Upvotes: 2

Related Questions