如何解决将输入设置为只读?
我正在尝试构建一个成绩册网络应用程序。我希望能够编辑表格单元以输入成绩,但无法将其设置为只读。我在做什么错了?
我尝试更改“保存”按钮中的代码,但没有任何效果。我似乎由于某种原因无法获得输入标签。我错过了什么吗?还有另一种尝试将单元格设置为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>
解决方法
HTML ID在文档中必须是全局唯一的。由于您将每个ID都设置为inpoot
,因此getElementById
调用总是选择相同的元素。同样,这些元素是td
,而不是输入本身。
尝试以此方式更改保存功能:
function saveData(){
//turn all inputs into readOnly
document.querySelectorAll("td > input").forEach(input => {
input.readOnly = true;
});
}
,
还有另一种尝试将单元格设置为readOnly的方法吗?
使用此:
JS:
var myInput = document.createElement("input");
myInput.classList.add("readOnly-input");
CSS:
.readOnly-input{ pointer-events: none; }
当指针事件设置为无时,用户将无法交互。让我知道是否需要更多说明。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。