Редактирование 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

Вот другой подход.

---

Прикрепите обработчик с одним кликом к таблице вместо каждой ячейки. Вы можете сделать это с помощью onclick в HTML, но это, как правило, предпочтительнее, чтобы сохранить ваш JavaScript и HTML обособлены

document.querySelector('table').addEventListener('click', function(evt) { 
    ... 
} 

---

В обработчике определить, что была нажата с помощью event.target:

var o= evt.target; 

---

Test, если 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 «s:

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