How can I change text to input field clicking on the text itself

Question

I want to change commitment text to be changed with input field when I click on commitment and when I press enter it should show the newly entered input.

I am new to javascript but I looked many codes but they didn't slove what I want please can you provide any idea how to do this?`

<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

Is this what you are looking for?

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

Working demo

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