Javascript 通过输入更改纯文本

Question

我想用输入数据和按钮元素替换单击的“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;";

 });


}

Answer 1

这是一种不同的方法。

<小时/>将单击处理程序附加到表而不是每个单元格。您可以通过在 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 来处理的。

Working Fiddle