想要在jquery中显示表中特定行的文本框

Question

I want to display the text box and its update button for which the row I click to edit my value.

In the above image When I click edit discount to change the discount value for the booking id 6, it shows all the text boxes in all rows like

<table id="example1" class="table table-bordered table-striped">
         <td><?php echo $bookedrow['status'];?></td>
       <td class="discount_val"><?php echo $bookedrow['discount'];?></td>
       <td class="new_discount">
         <input type="text" name="new_discount"/>
          <input class="btn btn-primary" id="update" name="update" value="Update" type="submit"/>
        </td>
       <td><a href="#" class="edit_discount">Edit discount</a></td>
            </tr>
               </tbody>
        </table>

JS code:

       $('.new_discount').hide();   
 $('.edit_discount').click(function(){
    $('.discount_val').hide(); 
    $('.new_discount').show();

 });

Now i want to get the text box and its button for which I'm selecting to update and that value will update for that particular id only.Guide me!!

Answer 1

You need to use DOM traversal functions to find just the element in the current row:

$('.edit_discount').click(function() {
    var row = $(this).closest("tr");
    row.find(".discount_val").hide();
    row.find(".new_discount").show();
});