Question

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

现在这几乎正在发生，问题是当我点击td它转向输入框时，当我再次点击同一个输入框时，它会在文本框中输出它的html代码作为它的值，然后所有td变得疯狂，像这样：<input id='thisInputId' type='text' value='"+thisInHtml+"' style='width: 100px;'>它同时创建两个输入框，有时在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];
            }
         } 
      }            
   }
}

http://jsfiddle.net/mohsinali/npckf9xs/6/

Answer 1

经过一番努力，我自己想出了解决方案并解决了这个问题，我也发现它总是很简单我们必须正确思考。我相信它可以更优化。

    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;                           
                   }
                }
             }
          }

通过单击输入框两次，它在输入框中打印它自己的html代码

1 个答案: