我正在尝试构建一个成绩册网络应用程序。我希望能够编辑表格单元以输入成绩,但无法将其设置为只读。我在做什么错了?
我尝试更改“保存”按钮中的代码,但没有任何效果。我似乎由于某种原因无法获得输入标签。我错过了什么吗?还有另一种尝试将单元格设置为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>
答案 0 :(得分:2)
HTML ID在文档中必须是全局唯一的。由于您将每个ID都设置为inpoot
,因此getElementById
调用总是选择相同的元素。同样,这些元素是td
,而不是输入本身。
尝试以此方式更改保存功能:
function saveData(){
//turn all inputs into readOnly
document.querySelectorAll("td > input").forEach(input => {
input.readOnly = true;
});
}
答案 1 :(得分:0)
还有另一种尝试将单元格设置为readOnly的方法吗?
使用此:
JS:
var myInput = document.createElement("input");
myInput.classList.add("readOnly-input");
CSS:
.readOnly-input{ pointer-events: none; }
当指针事件设置为无时,用户将无法交互。让我知道是否需要更多说明。