如何使我的 td 中的所有输入对于单击编辑按钮的行都是可编辑的

Question

I'm very new to web dev and I'm sure this should be simple but I can't figure it out.我对 web 开发人员非常陌生，我确信这应该很简单，但我无法弄清楚。 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.我没有使用 jquery 所以如果可能的话想要一个纯 js 解决方案。

The table structure is below and the edit link is calling UpdateTableRow();表结构如下，编辑链接调用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.目前我的 updateTableRow() function 正在向控制台输出很多内容，所以我可以弄清楚发生了什么，但我现在有点卡住了。 The desired result is to update all the readOnly attributes for each Input element to readOnly=false as this should make the input editable?期望的结果是将每个 Input 元素的所有 readOnly 属性更新为 readOnly=false 因为这应该使输入可编辑？ UpdateTableRow() in /classes.js /classes.js 中的 UpdateTableRow()

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渲染 HTML 表代码

<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带控制台的渲染表 output

Answer 1

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:您可以获取最近的tr标记中所有input元素的列表，并删除每个元素的 readonly 属性，如下所示：

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

如何使我的 td 中的所有输入对于单击编辑按钮的行都是可编辑的

问题描述

1 个解决方案

解决方案1
0 2022-08-11 17:12:53

如何使我的 td 中的所有输入对于单击编辑按钮的行都是可编辑的

问题描述

1 个解决方案

解决方案1 0 2022-08-11 17:12:53

解决方案1
0 2022-08-11 17:12:53