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

Issue

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" class="new" value= '0' /></td>
              <td id="td-update-<%= index + 1 %>"><input readonly id="inp-update-<%= index +1 %>" type="text" name="update" class="update" value= '0' /></td>
              <td id="td-edit-<%= index + 1 %>" class="postcell"><a id="td-edit-<%= index + 1 %>" href="#" onclick= "UpdateTableRow(this);return false;">edit</href></td>
              <td id="td-delete-<%= index + 1 %>"class="postcell"><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" class="new" value="0"></td>
              <td id="td-update-1"><input readonly="" id="inp-update-1" type="text" name="update" class="update" value="0"></td>
              <td id="td-edit-1" class="postcell"><a id="td-edit-1" href="#" onclick="UpdateTableRow(this);return false;">edit</a></td>
              <td id="td-delete-1" class="postcell"><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" class="new" value="0"></td>
              <td id="td-update-2"><input readonly="" id="inp-update-2" type="text" name="update" class="update" value="0"></td>
              <td id="td-edit-2" class="postcell"><a id="td-edit-2" href="#" onclick="UpdateTableRow(this);return false;">edit</a></td>
              <td id="td-delete-2" class="postcell"><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" class="new" value="0"></td>
              <td id="td-update-3"><input readonly="" id="inp-update-3" type="text" name="update" class="update" value="0"></td>
              <td id="td-edit-3" class="postcell"><a id="td-edit-3" href="#" onclick="UpdateTableRow(this);return false;">edit</a></td>
              <td id="td-delete-3" class="postcell"><a id="td-delete-3" href="">delete</a></td>
        </tr> 
      </tbody></table>
    </form>

Rendered Table with console output

Solution

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');
    }
}

Answered By – Pantalaimon

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published