我想用输入数据和按钮元素替换单击的“td”元素的内容。
当我单击包含纯文本的“td”时,我想将纯文本与输入(来自其他地方)和按钮交换。单击按钮时,输入和按钮应替换为输入的明文。
这是链接:https://jsfiddle.net/a2y9s424/1/
注意:我需要仅使用 JAVASCRIPT 而不是 jQuery 来做到这一点
function edit(td){
if(isEdit==0) {
data=td.value;
isEdit=1;
satir=td.getAttribute("satir");
sutun=td.getAttribute("sutun");
ilkDeger=td.innerHTML;
myInput=document.createElement("input");
td.appendChild(myInput);
myInput.focus();
kaydet=document.createElement("input");
kaydet.type="button";
vazgec=document.createElement("input");
vazgec.type="button";
kaydet.value="Kaydet";
vazgec.value="Vazgeç";
td.appendChild(kaydet);
td.appendChild(vazgec);
}
myInput.addEventListener("onblur",function(){
blur=1;
});
vazgec.addEventListener("click",function(){
td.innerHTML=ilkDeger;
td.removeChild(kaydet);
isEdit=0;
return false;
});
kaydet.addEventListener("click",function(){
console.log("dsa");
td.value="myInput.value;";
});
}
最佳答案
这是一种不同的方法。
<小时/> 将单击处理程序附加到表而不是每个单元格。您可以通过在 HTML 中使用onclick
来实现此目的,但通常最好将 JavaScript 和 HTML 分开:
document.querySelector('table').addEventListener('click', function(evt) {
...
}
<小时/>
在处理程序中,使用 event.target 确定单击的内容:
var o= evt.target;
<小时/>
测试 td
是否被点击,如下所示:
if(o.tagName==='TD') {
...
}
请注意,element.tagName
始终为大写。
td
,则将其 innerHTML
保存为属性,并将其 innerHTML
替换为 input
,保存
按钮和取消
按钮。然后将焦点设置在输入
上:
if(o.tagName==='TD') {
o.setAttribute('value', o.innerHTML);
o.innerHTML= '<input type="text" value="'+o.innerHTML+'">' +
'<button class="save" >Save </button>' +
'<button class="cancel">Cancel</button>';
o.querySelector('input').focus();
}
请注意,我为按钮分配了类(save
和 cancel
)。
表
的点击处理程序中:
else if(o.className==='save') {
o.parentNode.innerHTML= o.parentNode.querySelector('input').value;
}
else if(o.className==='cancel') {
o.parentNode.innerHTML= o.parentNode.getAttribute('value');
}
<小时/>
将所有内容放在一起:
document.querySelector('table').addEventListener('click', function(evt) {
var o= evt.target;
if(o.tagName==='TD') {
o.setAttribute('value', o.innerHTML);
o.innerHTML= '<input type="text" value="'+o.innerHTML+'">' +
'<button class="save" >Save </button>' +
'<button class="cancel">Cancel</button>';
o.querySelector('input').focus();
}
else if(o.className==='save') {
o.parentNode.innerHTML= o.parentNode.querySelector('input').value;
}
else if(o.className==='cancel') {
o.parentNode.innerHTML= o.parentNode.getAttribute('value');
}
});
<小时/>
请注意,没有局部变量。此外,无需使用 createElement
或 appendChild
,因为这是通过使用 innerHTML
来处理的。
关于Javascript 通过输入更改纯文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30243822/