Question

我有一个带细胞的简单表格。当用户单击一个单元格时，会在单元格内添加一个文本框，用于编辑内容。但是，当我双击一个单元格来编辑它的内容时，输入字段的属性就会显示出来。它不允许我编辑和添加其他值。这是我正在使用的脚本。

window.onload = function() {
  var cells = document.getElementsByTagName("td");
  var theads = document.getElementsByTagName("th");

  for (let i = 0; i < cells.length; i++) {
    cells[i].addEventListener("click", function() {
      highlightCell(i);
    });
  }

    function highlightCell(x) {
        var txtBox = document.createElement("input");
        txtBox.id = "myTxt";
        txtBox.type = "text";
            for (var i = 0; i<9; i++) {
              if (i == x) {
                txtBox.value = cells[i].innerHTML;

                cells[i].innerHTML = "";
                cells[i].appendChild(txtBox);
                cells[i].style.backgroundColor = "lightBlue";
                }
            }
        }
    }

Answer 1

找到解决方案，只需要使用select（）。这会突出显示所选字段，添加一个用户可以更新的输入框，然后在按下输入时将值保存在单元格中。

function highlightCell(x) {
  //add input field inside cell
  var txtBox = document.createElement("input");
  txtBox.id = x;
  txtBox.type = "text";

    for (var i = 0; i<9; i++) {
      if (i == x) {
        txtBox.value = cells[i].innerHTML;

        cells[i].innerHTML = "";
        cells[i].appendChild(txtBox);
        txtBox.select();

        cells[i].style.backgroundColor = "lightBlue";

        cells[x].onkeypress = function(){
          var event = window.event;
          var btnPress = event.keyCode;

          if(btnPress == 13)
          {
            var elem = document.getElementById(x);
            cells[x].innerHTML = elem.value;
            elem.parentNode.removeChild(elem);
          }
        }
      } else {
        cells[i].style.backgroundColor = "white";
      }
    }
  }

无法编辑通过javascript添加的输入字段

1 个答案: