CODEWITHSUNDEEP
javascriptjqueryhtml-table
egx
egx

Reputation: 399

Selecting one <td> from a table

I have a table which consist of user added data. All the 's added are added with a equal button. Like this: 

<td> 
  <form action="newBet.jsp" method="get">
    <fieldset>
        <input class="button betButton1" id="Won" type="submit" name="W" value="&#10004;"/>

          <div class="closeEarlyForm" style="display:none;">
            <input class="form-control" name="update1" type="number"/>
            <input class="button betButton1" type="submit" name="update" value="Close early"/>
          </div>

       <input class="closeEarlyLink" type="button" value="&#9998; Close early?"/>
    </fieldset>
 </form>
</td>

This wokrs fine. Now, I want to add some jquery which toggle the hidden div element. This is where I run into troubles. I can't seem show the div element only on the clicked element. Instead it shows the hidden div element on all the td's. 

$(document).ready(function(){
  $(".closeEarlyLink").click(function(e){
    e.preventDefault();
    $(".closeEarlyForm").fadeToggle();
  });
});

I know that my problem is that I select all the elements with the class, but I cant figure out how to only toggle/select the hidden element on the specific td.

Upvotes: 1

Views: 36

Answers (1)

Mamun
Mamun

Reputation: 68943

You can try using this keyword with parent() and find():

$(this).parent().find(".closeEarlyForm").fadeToggle();

Demo: 

$(document).ready(function(){
  $(".closeEarlyLink").click(function(e){
    e.preventDefault();
    $(this).parent().find(".closeEarlyForm").fadeToggle();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td> 
  <form action="newBet.jsp" method="get">
    <fieldset>
        <input class="button betButton1" id="Won" type="submit" name="W" value="&#10004;"/>

          <div class="closeEarlyForm" style="display:none;">
            <input class="form-control" name="update1" type="number"/>
            <input class="button betButton1" type="submit" name="update" value="Close early"/>
          </div>

       <input class="closeEarlyLink" type="button" value="&#9998; Close early?"/>
    </fieldset>
 </form>
</td>

Upvotes: 2

Related Questions