javascript - 如何使用jquery在编辑案例中制作可编辑文本

Question

我有一张 table ，每个 table 都有自己的编辑按钮:

<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>

我的问题是，当我点击特定的编辑时，它相应的 p 标签应该被隐藏并且 input type=text 应该是可见的，但在我的例子中，通过点击“编辑”按钮，每个p 标签隐藏并显示所有输入文本而不是特定标签。

我的 jQuery 代码如下:

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

我是新来的，有人可以帮我解决这个问题吗？提前谢谢。我只想点击编辑打开他们的文本框而不是 cs

我的观点是这样的: https://screenshots.firefox.com/9zlXPAB2kw8MYxR7/localhost

我想点击编辑并命名 pay1 和 pay2 应该是文本

Answer 1

删除 .class声明，因为该事件将适用于 .hide() 中的每个人和 .show() .把 click事件直接在所有p在这种情况下。 (可以很容易地根据您的规范进行调整)。

放this而不是你在 'show() 中的类(class)和 hide() .显示当前 <td> s .text您可以使用 jQuery 类 .siblings()功能和特性 .text直接兄弟。

编辑:

因为您希望在点击 Edit 时更改文本按钮而不是每个p然后你可以放置p与 .edit_btn , 并使用 .parent() 遍历 DOM和 .children()功能。

$(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>