如何使用jquery在编辑用例中生成可编辑文本

Question

我有一张桌子，就像每个桌子都有编辑按钮：

<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标记应该是隐藏的，输入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()和hide()中而不是您的类中。要显示当前<td>的.text类，可以直接使用jQuery .siblings()函数并指定.text同级。

编辑：

因为您希望在单击Edit按钮而不是每个p时更改文本，所以可以将p与.edit_btn放在一起，并使用.parent()和.children()函数上下遍历DOM。

​

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

​

Answer 2

您正在按类访问元素。$('.name')返回类名的所有元素，$('.text')还返回类文本的所有元素，而不仅仅是单击的元素。因此，您需要给出单个元素唯一的id并按id $('#id')进行选择。请参阅https://api.jquery.com/id-selector/

Answer 3

您应该像这样更改Javascript部分：

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

在jQuery中，.parents()函数将检查"edit_btn“类的父级，即<td>。然后，.siblings()函数考虑<td>标记的所有兄弟类，该标记位于相同的<tr>标记下。然后，.children('p')函数将检查带有<p>标记的子程序，这意味着它考虑了<p>标签下的<td>标记，然后hide()函数将隐藏特定的<p>标记。检查下面的片段。

​

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

​