私はプロジェクトの顧客フォームを作成していますが、私はそれらを表示している間にユーザーが顧客のデータを編集するボタンをクリックできるようにしたいと考えています。ここで は私が必要なものである：ユーザーがボタンをクリックするとボタンのクリック時にHTMLタグを変更する
<span>Customer_name</span>
<span>Customer_surname</span>
<span>...</span>
<button>Click me to turn spans into inputs</button>
、私はスパンが入力に変身します。 何か助けになりました！
あなたはネイティブJavaScriptでそれをしたい場合は...
は、それはあなたがそこに入力ボックスを持つことができ、彼らは、デフォルトでは非表示になります
var elems = document.querySelectorAll("#span-container > div");
document.getElementById("toggle-btn").addEventListener('click', function(){
for(var i=0; i< elems.length; i++) {
if(elems[i].firstElementChild.className.indexOf("see") === -1) {
elems[i].firstElementChild.className = elems[i].lastElementChild.className += "see";
elems[i].lastElementChild.value = elems[i].firstElementChild.innerText;
} else {
elems[i].firstElementChild.className = elems[i].lastElementChild.className = "";
elems[i].firstElementChild.innerText = elems[i].lastElementChild.value;
}
}
})* {
padding: 0;
margin: 0
box-sizing: border-box;
}
#span-container > div {
width: 200px;
height:30px;
margin: 5px;
}
#span-container > div span{
display: block;
width: 100%;
height: 100%;
}
#span-container > div input {
height: 100%;
width: 100%;
display: none;
}
#span-container > div span.see {
display: none;
}
#span-container > div input.see {
display: block;
}
button {
padding: 4px 2px 6px;
border-radius: 2px;
background-color: #fff;
box-shadow: none;
border: 0;
cursor: pointer;
min-width: 75px;
}<div id="span-container">
<div>
<span>Customer_name</span>
<input type="text" />
</div>
<div>
<span>Customer_surname</span>
<input type="text" />
</div>
<div>
<span>Customer_surname</span>
<input type="text" />
</div>
</div>
<button id="toggle-btn">Toggle</button>非常に非常に仲間ありがとう、私はこれを使用し、完璧に働いて、私がしたいように。非常に謝る！ :) – petrosg
このようにしますか？
HTML
<div class="customerdata">
<span>Customer_name</span>
<span>Customer_surname</span>
<span>...</span>
<button class="editbtn">Click me to turn spans into inputs</button>
</div>
JS
$(document).ready(function(){
$(document).on("click",'.editbtn',function(){
$(this).closest(".customerdata").find('span').attr("contenteditable","true");
});
});
まさに私が欲しいもの！私はそれを試してみます:) – petrosg
チェックHere
$('button').click(function()
{
$('span').each(function()
{
$(this).context.innerHTML="";
$(this).context.innerHTML='<input type= text id = textBox></input>';
})
});
に役立ちます願っています。ユーザーがボタンをクリックすると、入力ボックスが表示され、スパンが非表示になります。 – Lalit
私はそれをやっていると思っていましたが、正しい方法でしょうか？私は多分それのような何かをやっているjavascript関数があると思った。とにかく助けてくれてありがとう。 – petrosg
また、スパンを削除して新しい入力を作成して置き換えることもできます – NewBieBR