Set input to read only?

Question

I am trying to build a grade book web app. I wanted to be able to edit the table cells to input grades, but I can't set it to readonly. What am I doing wrong?

I tried changing the code in the save button, but nothing works. I cant seem to get the input tags for some reason.Am I missing something? Is there another way to try to set the cells to readOnly? I tried getting the td tags, but that didn't work.

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>

Jacob · Accepted Answer · 2020-08-17 17:23:53Z

2

HTML IDs must be globally unique within a document. Since you're setting the ID to inpoot for each one, then the getElementById call is always going to be selecting the same element. Also, these elements are the tds, not the inputs themselves.

Try changing your save function thusly:

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

edited Aug 17, 2020 at 17:23

answered Aug 17, 2020 at 17:18

Jacob

79k24 gold badges159 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J.slack Over a year ago

Thanks! This worked. I also spelled "saveData()" wrong on the button as well.

AmitJS94 · Accepted Answer · 2020-08-17 17:18:32Z

0

Is there another way to try to set the cells to readOnly?

Use this :

JS :

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

CSS :

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

The user can't interact when pointer-events are set to none. Let me know if you need more explaination.

answered Aug 17, 2020 at 17:18

AmitJS94

1,2121 gold badge12 silver badges22 bronze badges

Collectives™ on Stack Overflow

Set input to read only?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related