如何在单击保存按钮时在输出文本上显示编辑框

Question

如何在点击保存按钮时编辑输出文本。有什么可以帮忙的请...

$(document).ready(function(){
  $("#btn").click(function(){
    let getVal = $("#inputValue").val();
    let button = `<button name="button-${getVal}">Button for ${getVal}</button>`
    $("#output").html($("#output").html() + " " + getVal + button);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <div id="output"></div>
</div>  

Answer 1

$(document).ready(function(){
  $("#btn").click(function(){
    let getVal = $("#inputValue").val();
    let button = `<button onclick="Update(this);" name="button">Edit/Update </button>`
    //let button = `<button onclick="Update(this);" name="button-${getVal}">Edit/Update for ${getVal}</button>`
    $("#output").append('<tr><td><input name="test[]" type="text" value="'+getVal+'" disabled></td><td>' + button +'</td></tr>');
  });
});
function Update(CurrentElement) 
{  
if($(CurrentElement).closest('tr').find('input').attr('disabled')) {  
$(CurrentElement).closest('tr').find('input').attr('disabled',false);
  } else {
$(CurrentElement).closest('tr').find('input').attr('disabled',true);
 }
}

table {  font-family: arial, sans-serif;  border-collapse: collapse;  width: 100%;}
td, th {  border: 1px solid #dddddd;  text-align: left;  padding: 8px;}
tr:nth-child(even) {  background-color: #dddddd;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <table id="output"><tr><th>Value</th><th>Action</th></tr></table>
</div>

Answer 2

也许这对你有帮助。

$(document).ready(function(){
  $("#btn").click(function(){
    let getVal = $("#inputValue").val();
    $('#output').val(getVal);
  });
  
    $("#save").click(function(){
    let getValNew = $("#output").val();
      $('#inputValue').val(getValNew);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <input type="text" name="text-out" id="output">
  <button id="save">Update value</button>
</div>