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

Question

how can i edit on output text on click with save button. please if any could help....

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

May be this can help you.

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