How can I make all the inputs inside my td's editable for the row the edit button was clicked o-CodePudding

I'm very new to web dev and I'm sure this should be simple but I can't figure it out. I'm trying to make all inputs in a table row editable on click of the edit link. I'm not using jquery so would like a pure js solution if possible.

The table structure is below and the edit link is calling UpdateTableRow();

<HTML>
  <head>
     <script src="/classes.js"></script>
  </head>
<body>
<form method="POST" action="/">
      <table id="tbl-classes">
        <tr>
          <th>name</th>
          <th>year</th>
          <th>size</th>
          <th>active</th>
        </tr>
        <tr>
          <!--Loop through all sql rows and add the data to the tables, use index to numerate cell id's-->
          <% data.forEach((row, index) => { %>
              <td id="td-name-<%= index   1 %>"><input readonly id="inp-name-<%= index   1 %>" type="text" name="name" value= <%= row.name %> /></td>
              <td id="td-year-<%= index   1 %>"><input readonly id="inp-year-<%= index   1 %>" type="text" name="year" value= <%= row.year %> /></td>
              <td id="td-size-<%= index   1 %>"><input readonly id="inp-size-<%= index   1 %>" type="text" name="size" value= <%= row.size %> /></td>
              <td id="td-active-<%= index   1 %>"><input readonly id="inp-active-<%= index  1 %>" type="text" name="active" value= <%= row.active %> /></td>
              <td id="td-new-<%= index   1 %>"><input readonly id="inp-new-<%= index  1 %>" type="text" name="new"  value= '0' /></td>
              <td id="td-update-<%= index   1 %>"><input readonly id="inp-update-<%= index  1 %>" type="text" name="update"  value= '0' /></td>
              <td id="td-edit-<%= index   1 %>" ><a id="td-edit-<%= index   1 %>" href="#" onclick= "UpdateTableRow(this);return false;">edit</href></td>
              <td id="td-delete-<%= index   1 %>"><a id="td-delete-<%= index   1 %>" href>delete</href></td>
        </tr>
          <% }) %>
      </table>
    </form>
   </body>
<HTML>

At the moment my updateTableRow() function is outputting a lot to the console so I can figure out what's going on but I'm a bit stuck now. The desired result is to update all the readOnly attributes for each Input element to readOnly=false as this should make the input editable? UpdateTableRow() in /classes.js

function UpdateTableRow(object){
    console.log(object.closest('tr'));
    var row = object.closest('tr');
    console.log(row.cells.length);
    for(i=0; i < row.cells.length; i  ){
            console.log(row.cells[i].inputID("inp-name-)"   (i)));
    }
 }

Rendered HTML Table Code

<form method="POST" action="/classes">
      <button onclick="addNewRoomTableRecord()" type="button" name=" " autofocus=""> </button>
      <input id="save-btn" type="submit" value="V">
      <table id="tbl-classes">
        <tbody><tr>
          <th>Class</th>
          <th>School Year</th>
          <th>Class Size</th>
          <th>Active</th>
        </tr>
        <tr>
          <!--Loop through all sql rows and add the data to the tables, use index to numerate cell id's-->
          
              <td id="td-name-1"><input readonly="" id="inp-name-1" type="text" name="name" value="1A"></td>
              <td id="td-year-1"><input readonly="" id="inp-year-1" type="text" name="year" value="1"></td>
              <td id="td-size-1"><input readonly="" id="inp-size-1" type="text" name="size" value="30"></td>
              <td id="td-active-1"><input readonly="" id="inp-active-1" type="text" name="active" value="1"></td>
              <td id="td-new-1"><input readonly="" id="inp-new-1" type="text" name="new"  value="0"></td>
              <td id="td-update-1"><input readonly="" id="inp-update-1" type="text" name="update"  value="0"></td>
              <td id="td-edit-1" ><a id="td-edit-1" href="#" onclick="UpdateTableRow(this);return false;">edit</a></td>
              <td id="td-delete-1" ><a id="td-delete-1" href="">delete</a></td>
        </tr>
          
              <tr><td id="td-name-2"><input readonly="" id="inp-name-2" type="text" name="name" value="1B"></td>
              <td id="td-year-2"><input readonly="" id="inp-year-2" type="text" name="year" value="1"></td>
              <td id="td-size-2"><input readonly="" id="inp-size-2" type="text" name="size" value="30"></td>
              <td id="td-active-2"><input readonly="" id="inp-active-2" type="text" name="active" value="1"></td>
              <td id="td-new-2"><input readonly="" id="inp-new-2" type="text" name="new"  value="0"></td>
              <td id="td-update-2"><input readonly="" id="inp-update-2" type="text" name="update"  value="0"></td>
              <td id="td-edit-2" ><a id="td-edit-2" href="#" onclick="UpdateTableRow(this);return false;">edit</a></td>
              <td id="td-delete-2" ><a id="td-delete-2" href="">delete</a></td>
        </tr>
          
              <tr><td id="td-name-3"><input readonly="" id="inp-name-3" type="text" name="name" value="1C"></td>
              <td id="td-year-3"><input readonly="" id="inp-year-3" type="text" name="year" value="1"></td>
              <td id="td-size-3"><input readonly="" id="inp-size-3" type="text" name="size" value="30"></td>
              <td id="td-active-3"><input readonly="" id="inp-active-3" type="text" name="active" value="1"></td>
              <td id="td-new-3"><input readonly="" id="inp-new-3" type="text" name="new"  value="0"></td>
              <td id="td-update-3"><input readonly="" id="inp-update-3" type="text" name="update"  value="0"></td>
              <td id="td-edit-3" ><a id="td-edit-3" href="#" onclick="UpdateTableRow(this);return false;">edit</a></td>
              <td id="td-delete-3" ><a id="td-delete-3" href="">delete</a></td>
        </tr> 
      </tbody></table>
    </form>

Rendered Table with console output

CodePudding user response：

You can get a list of all the input elements within the closest tr tag, and remove the readonly attribute of each of them like this:

function UpdateTableRow(object){
    inputs = object.closest('tr').getElementsByTagName('input');
    for (var i=0; i<inputs.length; i  ) {
        inputs[i].removeAttribute('readonly');
    }
}

Equally, the reverse (make entire row readonly again) can be done almost identically:

function LockTableRow(object){
    inputs = object.closest('tr').getElementsByTagName('input');
    for (var i=0; i<inputs.length; i  ) {
        inputs[i].setAttribute('readonly','true');
    }
}