1. 程式人生 > >點選表格td 實現某個單元格可編輯

點選表格td 實現某個單元格可編輯

html (elementUi中的表格,傳入位置和當前值)
在這裡插入圖片描述
methods(生成input,將當前輸入的value值等於當前單元格的值)

  handleChangeCorrectValue(index, data) {
      var target = event.target,
      $target = $(target),
      attachElement = null;
      $target.hide();
      if (attachElement != null) {
        attachElement.hide();
      }
      var input = document.createElement("input");
      input.type = "text";
      input.value = data;
      input.setAttribute("style", "width:149px;height:48px;text-align:center;box-sizing:border-box;");
      target.parentNode.insertBefore(input, target);
      input.focus();
      var _this = this;
      input.onblur = function() {
        if (this.value) {
          _this.cloneCorrectNumTableData[index].questionCorrectValue = this.value;
        } else {
          this.value = data;
        }
        _this.cloneCorrectNumTableData[index].questionCorrectValue = this.value;
        input.parentNode.removeChild(input);
        $target.show();
        if (attachElement != null) {
          attachElement.show();
        }
      };
      input.onkeypress = function(e) {
        if (e.keyCode == 13) {
          this.blur();
        }
      };
    }