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

这是一种不同的方法。

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

1 个答案: