질문
저장 button을 클릭하여 출력 텍스트를 편집하려면 어떻게해야합니까? 도움이된다면 제발 ....
$(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>
답변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>
답변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>
출처 : https://stackoverflow.com/questions/63113905/how-can-i-show-an-edit-box-on-output-text-on-click-with-save-button