我如何将文本更改为单击文本本身的输入字段

Question

当我单击承诺时，我想更改承诺文本以在输入字段中进行更改，当我按Enter键时，应该显示新输入的输入。

我是Java语言的新手，但是我看了很多代码，但它们没有满足我的要求，请问您提供如何执行此操作的任何想法吗？

<div class="table-responsive">
    <table class="table table-bordered table-hover" id="dtBasicExample" cellspacing="0" width="100%">
      <!-- Table head -->
      <thead class="theader">
        <tr>
          <th>Grade</th>
          <th>Student</th>
          <th>
            <!-- Default un -->
            <!-- <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="tableDefaultCheck1">
              <label class="custom-control-label" for="tableDefaultCheck1">P/A</label>
            </div> -->P/A
          </th>
          <th>Check-In</th>
          <th>Check-Out</th>
          <th>Tutor</th>
          <th>Videos</th>
          <th>Others</th>
          <th>Commitment</th>
        </tr>
      </thead>
<tbody>
</tr>
        <tr>
          <td>7</td>
          <td>Name</td>
          <th scope="row">
            <!-- Default un -->
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="tableDefaultCheck3">
              <label class="custom-control-label" for="tableDefaultCheck3"></label>
            </div>
          </th>
          <td>Time</td>
          <td>Time</td>
          <td>Time</td>
          <td>Time</td>
          <td>Time</td>
          <td>Commitment
            <div class="md-form">
              <input type="text" id="form2" class="form-control">
              <label for="form2">New Commitment</label>
            </div>
          </td>
        </tr>
</tbody>
</table>

Answer 1

这是您要寻找的吗？

$('.md-form input').keydown(function(e) {
  if(e.keyCode == 13 && $(this).val().length > 0){
    $(this).next().text($(this).val())
  }
});

工作演示

$('.md-form input').keydown(function(e) {
  if (e.keyCode == 13 && $(this).val().length > 0) {
    $(this).next().show().text($(this).val())
    $(this).hide();
  }
});

$('.Commitment label').click(function() {
  $(this).prev().show();
  $(this).hide();
})

.Commitment input {
  display: none;
}

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<div class="table-responsive">
  <table class="table table-bordered table-hover" id="dtBasicExample" cellspacing="0" width="100%">
    <!-- Table head -->
    <thead class="theader">
      <tr>
        <th>Grade</th>
        <th>Student</th>
        <th>
          <!-- Default un -->
          <!-- <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="tableDefaultCheck1">
              <label class="custom-control-label" for="tableDefaultCheck1">P/A</label>
            </div> -->P/A
        </th>
        <th>Check-In</th>
        <th>Check-Out</th>
        <th>Tutor</th>
        <th>Videos</th>
        <th>Others</th>
        <th>Commitment</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>7</td>
        <td>Name</td>
        <th scope="row">
          <!-- Default un -->
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="tableDefaultCheck3">
            <label class="custom-control-label" for="tableDefaultCheck3"></label>
          </div>
        </th>
        <td>Time</td>
        <td>Time</td>
        <td>Time</td>
        <td>Time</td>
        <td>Time</td>
        <td class="Commitment">
          <div class="md-form">
            <input type="text" id="form2" class="form-control">
            <label for="form2">New Commitment</label>
          </div>
        </td>
      </tr>
      <tr>
        <td>7</td>
        <td>Name</td>
        <th scope="row">
          <!-- Default un -->
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="tableDefaultCheck3">
            <label class="custom-control-label" for="tableDefaultCheck3"></label>
          </div>
        </th>
        <td>Time</td>
        <td>Time</td>
        <td>Time</td>
        <td>Time</td>
        <td>Time</td>
        <td class="Commitment">
          <div class="md-form">
            <input type="text" id="form2" class="form-control">
            <label for="form2">New Commitment</label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>