Javascript 通过在输入框上单击两次它'；正在打印它'；在输入框中输入自己的html代码

我正在创建一个动态表并从数组中获取td值，我的目标是当我单击任何转换为输入框的单元格并将此td值作为输入值，以便我们可以更改，当我单击另一个td时，前一个td将返回到其原始位置，并使用新的或相同的旧值

现在这几乎发生了，问题是当我点击td时，它会变成输入框，当我再次点击同一个输入框时，它会在文本框中打印它的html代码作为它的值，然后所有的td都会变得疯狂，如下所示：

它同时创建两个输入框，有时在td中打印html代码而不创建输入框。我对这些东西还不熟悉，我一直在努力学习，并坚持了两天

var getInput = ""; var inputsParent = ""; var inputs = ""; var thisInHtml = ""; var getInputVal = "";
   var thisTdInnerHtml = ""; var input = ""; var flag = 1;

    var getInputLength = getInput.length+1;
      for(var j=0; j<allTds.length;j++){         
       allTds[j].onclick = function(){ 
        thisInHtml = this.innerHTML;                 
         var thisId = this.id;                                             

                   if(inputs.length != 0){
                   inputsParent.removeChild(inputs);   
                   inputsParent.innerHTML = getInputVal;     
                   flag = 1;
                    }

                  this.innerHTML = thisInHtml;  
                  if(getInputVal != ""){
                  input = this.innerHTML =  "<input id='thisInputId' type='text' value='"+thisInHtml+"' style='width: 100px;'>";
                  getInput = document.getElementsByTagName("input");
                  getInputVal = document.getElementById("thisInputId").value;
              }

                  if(getInputLength > 0){                      
                   for(var k =0; k<getInputLength;k++){
                     inputsParent = getInput[k].parentNode;
                     inputs = inputsParent.childNodes[0];
            }
         } 
      }            
   }
}

var getInput=“”；var inputsParent=“”；var输入=”；var thisInHtml=“”；var getInputVal=“”；
var thisTdInnerHtml=“”；var输入=”；var标志=1；
var getInputLength=getInput.length+1；
对于（var j=0；j
经过一番努力，我自己想出了解决方案，解决了这个问题，我还发现它总是很简单，我们只需要正确思考。我相信它可以更优化

    var getInput = ""; var inputsParent = ""; var inputs = ""; var thisInHtml = ""; var getInputVal = "";
    var thisTdInnerHtml = ""; var input = ""; var flag = 0; var thisInputVal = ""; var thisTdId = "";   
    var cellIndex = ""; var thisRowIndex = "";

      for(var j=0; j<allTds.length;j++){
       allTds[j].ondblclick = function(){
        thisInHtml = this.innerHTML;                         

            getInput = document.getElementsByTagName("input");

                if(getInput.length === 0){  
                   input = this.innerHTML =  "<input id='thisInputId' type='text' value='"+thisInHtml+"' style='width: 100px;'>";
                    thisTdId = this.id;     
                     cellIndex = this.cellIndex;

                       var rows = document.getElementsByTagName('tr');
                         for(var o=0; o<rows.length;o++){
                           rows[o].ondblclick = function(){
                             thisRowIndex = this.rowIndex-1;                      
                      }
                   }                       
                }

                else if(getInput.length > 0){
                for(var k=0; k<getInput.length; k++){
                inputsParent = getInput[k].parentNode;
                inputs = inputsParent.childNodes[0];
                thisInputVal = inputs.value;
                inputsParent.removeChild(inputs);
                flag = 1;

                }
                }

                   if(flag === 1){
                    var getTdById = document.getElementById(thisTdId);
                     getTdById.innerHTML = thisInputVal;

                         if(cellIndex === 0){                    
                         proArr[thisRowIndex] = thisInputVal;
                         }              

                         else if (cellIndex === 1){
                         proColorArr[thisRowIndex] = thisInputVal;
                         }

                         else if (cellIndex === 2){
                         proPriceArr[thisRowIndex] = thisInputVal;
                         }                       

                         flag = 0;                           
                   }
                }
             }
          }              

var-getInput=“”；var-inputsParent=“”；var-inputs=“”；var-thisInHtml=“”；var-getInputVal=“”；
var thisTdInnerHtml=“”；var input=“”；var flag=0；var thistinputval=“”；var thisTdId=“”；
var cellIndex=“”；var thisRowIndex=“”；
对于（var j=0；j