Javascript 用输入改变纯文本

Question

我想用输入数据和按钮元素替换单击的 "td" 元素的内容。

当我单击包含纯文本的 "td" 时，我想将纯文本与输入（来自其他地方）和一个按钮交换。单击按钮时，输入和按钮应替换为输入的纯文本。

注意：我只需要使用 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;";

 });


}

Answer 1

这是一种不同的方法。

将单击处理程序附加到 table 而不是每个单元格。您可以通过在 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、save 按钮和 cancel按钮。然后将焦点放在 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）分配给了按钮。

现在我们只需要按钮的逻辑，我们将把它添加到 table 的点击处理程序中：

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.

处理的

Working Fiddle

Javascript 用输入改变纯文本

Javascript change plain text with input

javascript

edit

onclick

dynamically-generated

createelement