Question

我正在尝试构建一个成绩册网络应用程序。我希望能够编辑表格单元以输入成绩，但无法将其设置为只读。我在做什么错了？

我尝试更改“保存”按钮中的代码，但没有任何效果。我似乎由于某种原因无法获得输入标签。我错过了什么吗？还有另一种尝试将单元格设置为readOnly的方法吗？我尝试获取td标签，但这没用。

var myTable = document.getElementById("myTable");

var r = 0;
var c = 1;

function addRow() {
  //insert a row
  var row = myTable.insertRow(r);
  //insert cells into a row
  var cell = row.insertCell(0);
  cell.innerHTML = "Students[i]";
  r++;
}

function addColumn() {
  //add new cell to each row
  var allRows = document.getElementsByTagName("tr");
  for (var i = 0; i < allRows.length; i++) {
    row2 = allRows[i];
    cell2 = allRows[i].insertCell(c);
    cell2.innerHTML = "Puff";
  }
}

function editCell() {
  var allCells = document.getElementsByTagName("td");
  for (var j = 0; j < allCells.length; j++) {
    //clear text, then put in input box
    allCells[j].innerHTML = "";
    var myInput = document.createElement("input");
    myInput.type = "text";
    myInput.readOnly = false;
    allCells[j].appendChild(myInput);
  }
}

function saveData() {
  //turn all inputs into readOnly
  var allInputs = document.getElementsByTagName("td");
  for (var k = 0; k < allInputs.length; k++) {
    allInputs[k].id = "inpoot";
    document.getElementById("inpoot").readOnly = true;
  }
  //document.getElementsByTagName("input").readOnly = true;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<table id="myTable"></table>

<button onClick="addRow()">Students</button>
<button onClick="addColumn()">Days</button>
<button onClick="editCell()">Edit</button>
<button onClick="savaData()">Save</button>

Answer 1

HTML ID在文档中必须是全局唯一的。由于您将每个ID都设置为inpoot，因此getElementById调用总是选择相同的元素。同样，这些元素是td，而不是输入本身。

尝试以此方式更改保存功能：

function saveData(){
  //turn all inputs into readOnly
  document.querySelectorAll("td > input").forEach(input => {
    input.readOnly = true;
  });
}

Answer 2

还有另一种尝试将单元格设置为readOnly的方法吗？

使用此：

JS：

var myInput = document.createElement("input");
myInput.classList.add("readOnly-input");

CSS：

.readOnly-input{ pointer-events: none; }

当指针事件设置为无时，用户将无法交互。让我知道是否需要更多说明。

将输入设置为只读？

2 个答案: