CODEWITHSUNDEEP
javascriptjquery
Shruti
Shruti

Reputation: 149

how to make editable text in edit case using jquery

I have a table like every table have their edit button :

<table class="table-responsive table-striped  col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
  <tr>
    <td style="width:10px;">&nbsp;</td>
    <td style="width: 130px;">
      <p class="name"><?php echo $aircrews->fname.'&nbsp;'.$aircrews->lname;  ?></p>
      <input class="text" type="text" name="name" value="<?php echo $aircrews->fname.'&nbsp;'.$aircrews->lname;  ?>" style="height: 22px;width: 110px;border: none;">
    </td>
    <td style="width: 40px;">
      <p class="name"><?php echo $aircrews->pay_status1;  ?></p>
      <input type="text" class="text" name="pay1" value="<?php echo $aircrews->pay_status1;  ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
    </td>
    <td style="width: 40px;">
      <p class="name"><?php echo $aircrews->pay_status2;  ?></p>
      <input type="text" class="text" name="pay2" value="<?php echo $aircrews->pay_status2;  ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
    </td>
    <td class="right_set"><button class="edit_btn">Edit / -</button></td>
  </tr>
</table>

My problem is that when I click on particular edit then its corresponding p tag should be hidden and input type=text should be visible but in my case, by clicking on "edit" button, every p tag getting hide and showing all input text instead of particular tags.

My jQuery code is given below:

 <script type="text/javascript">
   $(document).ready(function(){
    $('.text').hide();
     $(this).on('click', function(){
        alert('ok');
        $('.name').hide();
        $('.text').show();
     })
   })
   </script>

I am a new be here can anyone please help me related this? thanx in advance. I want only clickable edit open their text boxes instead how cs

My view is like this : https://screenshots.firefox.com/9zlXPAB2kw8MYxR7/localhost

i want click on edit and name pay1 and pay2 should be text

Upvotes: 1

Views: 213

Answers (3)

Khyati Chandak
Khyati Chandak

Reputation: 66

You should change Javascript part like this:

<script type="text/javascript">
    $(document).ready(function() {
      $('.edit_btn').on('click', function() {
        $(this).parents().siblings().children('p').hide();
      })
    })
</script>

In jQuery, .parents() function will check for the parents of "edit_btn" class which is <td>. Then .siblings() function consider all the siblings of <td> tag which comes under the same <tr> tag. Then .children('p') function will check for childrens with <p> tag means it consider <p> tags which are under those <td> tags and then hide() function will hide that particular <p> tag. Check below Snippet.

$(document).ready(function() {
  $('.edit_btn').on('click', function() {
    $(this).parents().siblings().children('p').hide();
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-responsive table-striped  col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
  <tr>
    <td style="width:10px;">&nbsp;</td>
    <td style="width: 130px;">
      <p class="name">Name 1_1</p>
      <input class="text" type="text" name="name" value="Value Here 1_1" style="height: 22px;width: 110px;border: none;">
    </td>
    <td style="width: 130px;">
      <p class="name">Name 2_1</p>
      <input type="text" class="text" name="pay1" value="Value Here 2_1" style="height: 22px;width: 110px;border: none;text-align: center;">
    </td>
    <td style="width: 80px;">
      <p class="name">Name 3_1</p>
      <input type="text" class="text" name="pay2" value="Value Here 3_1" style="height: 22px;width: 110px;border: none;text-align: center;">
    </td>
    <td class="right_set"><button class="edit_btn">Edit / -</button></td>
  </tr>

  <tr>
    <td style="width:10px;">&nbsp;</td>
    <td style="width: 130px;">
      <p class="name">Name 2_1</p>
      <input class="text" type="text" name="name" value="Value Here 2_1" style="height: 22px;width: 110px;border: none;">
    </td>
    <td style="width: 80px;">
      <p class="name">Name 2_2</p>
      <input type="text" class="text" name="pay1" value="Value Here 2_2" style="height: 22px;width: 110px;border: none;text-align: center;">
    </td>
    <td style="width: 80px;">
      <p class="name">Name 2_3</p>
      <input type="text" class="text" name="pay2" value="Value Here 2_3" style="height: 22px;width: 110px;border: none;text-align: center;">
    </td>
    <td class="right_set"><button class="edit_btn">Edit / -</button></td>
  </tr>
</table>

Upvotes: 0

Jimenemex
Jimenemex

Reputation: 3176

Remove the .class delcarations since the event will apply to every one of them in .hide() and .show(). Put the click event directly on all p in this case. (Can easily be adjusted to your specs).

Put this instead of your class in 'show() and hide(). To show the current <td>s .text class you can use the jQuery .siblings() function and specificy the .text sibling directly.

EDIT:

Since you want to have the text change when you hit the Edit button and not each p then you can place p with .edit_btn, and traverse up and down the DOM using .parent() and .children() functions.

$(document).ready(function() {
  $('.text').hide();
  $('.edit_btn').on('click', function(e) {
    console.log(this);
    $(this).parent().siblings('td').children('p').hide();
    $(this).parent().siblings('td').children('.text').show();
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-responsive table-striped  col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
  <tr>
    <td style="width:10px;">&nbsp;</td>
    <td style="width: 130px;">
      <p class="name">
Name      </p>
      <input class="text" type="text" name="name" value="<?php echo $aircrews->fname.'&nbsp;'.$aircrews->lname;  ?>" style="height: 22px;width: 110px;border: none;">
    </td>
    <td style="width: 40px;">
      <p class="name">
name      </p>
      <input type="text" class="text" name="pay1" value="<?php echo $aircrews->pay_status1;  ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
    </td>
    <td style="width: 40px;">
      <p class="name">
name      </p>
      <input type="text" class="text" name="pay2" value="<?php echo $aircrews->pay_status2;  ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
    </td>
    <td class="right_set"><button class="edit_btn">Edit / -</button></td>
  </tr>
</table>

Upvotes: 1

memo
memo

Reputation: 1938

You are accessing the elements by class. $('.name') returns all elements of class name, also $('.text') returns all elements of class text, not just the one you clicked on. So you need to give individual elements unique ids and select by id $('#id'). See https://api.jquery.com/id-selector/

Upvotes: 0

Related Questions