如何使另一个td的表onclick的特定表可编辑

Question

我有一个带有一些行的表，在这里我需要使包含edit的no / on列可编辑，再次单击时，它应该不可编辑。这是下面的代码。

html

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="container">
  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders to a table:</p>            
  <table class="table table-bordered">

    <tbody>
      <tr>
        <td>John</td>
        <td class="test"><input type="text" disabled value="Yes"></td>

        <td><a class="edit" href="#">edit</a></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td><input type="text" disabled value="Yes"></td>
        <td><a class="edit" href="#">edit</a></td>
      </tr>
      <tr>
        <td>July</td>
        <td><input type="text" disabled value="Yes"></td>
        <td><a class="edit" href="#">edit</a></td>
      </tr>
    </tbody>
  </table>
</div>

jquery

 $(document).ready(function(){
    $(".edit").click(function(){
    alert('hi');
    $(this).parent().find('input').prop('disabled', false);
    });
});

Answer 1

.parent()在DOM中仅上一层，在您的情况下，它将是链接的<td>父级。您需要.closest('tr')，它将在DOM上一直持续到匹配为止。

$(".edit").click(function() {
  $(this).closest('tr').find('input').prop('disabled', false);
});

$('input').blur(function(){
$(this).prop('disabled', true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders to a table:</p>
  <table class="table table-bordered">

    <tbody>
      <tr>
        <td>John</td>
        <td class="test"><input type="text" disabled value="Yes"></td>

        <td><a class="edit" href="#">edit</a></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td><input type="text" disabled value="Yes"></td>
        <td><a class="edit" href="#">edit</a></td>
      </tr>
      <tr>
        <td>July</td>
        <td><input type="text" disabled value="Yes"></td>
        <td><a class="edit" href="#">edit</a></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

$(function(){
          $('table .edit').click(function(event) {
                $(this).closest('tr').find('input[type="text"]').prop('disabled', false);
          });
        })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table class="table table-bordered">
    <tbody>
      <tr>
        <td>John</td>
        <td class="test"><input type="text" disabled value="Yes"></td>

        <td><a class="edit" href="#">edit</a></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td><input type="text" disabled value="Yes"></td>
        <td><a class="edit" href="#">edit</a></td>
      </tr>
      <tr>
        <td>July</td>
        <td><input type="text" disabled value="Yes"></td>
        <td><a class="edit" href="#">edit</a></td>
      </tr>
    </tbody>
  </table>