单击HTML中的编辑按钮时如何使表（文本）中的字段可编辑

Question

我在表格的单列和其他列中都添加了一些硬编码的值，每行的编辑和删除按钮都如此。每当我单击第一行中的编辑选项时，第一列和同一行中存在的值都必须是可编辑的。同样，对于删除，必须删除整行。另外还有一个ADD选项，其中必须使用编辑和删除按钮

来填充行。

代码

<div id="resultset" style="display:none">

  <div class="table-responsive" align="centre" style="width:300px;margin-left: 10%;" readonly="readonly">
    <br>
    <br>
    <table id="example" class="table table-bordered table-striped table-hover" readonly="readonly">

      <tbody>

        <tr>
          <td>Full Review </td>
          <td>
            <div>
              <br>
              <br>
              <button type="button" id="searchBtn" class="btn btn-info">Edit</button> &nbsp;&nbsp;
              <button type="button" id="clearBtn" class="btn btn-info" onclick='onReset();'>Delete</button>


            </div>
          </td>

        </tr>
        <tr>
          <td>GHS Review</td>
          <td>
            <div>
              <br>
              <br>
              <button type="button" id="searchBtn" class="btn btn-info" onclick='onEdit();'>Edit</button> &nbsp;&nbsp;
              <button type="button" id="clearBtn" class="btn btn-info" onclick='onReset();'>Delete</button>


            </div>
          </td>
        </tr>
        <tr>
          <td>Maintenance Review</td>
          <td>
            <div>
              <br>
              <br>
              <button type="button" id="searchBtn" class="btn btn-info" onclick='onEdit();'>Edit</button> &nbsp;&nbsp;
              <button type="button" id="clearBtn" class="btn btn-info" onclick='onReset();'>Delete</button>


            </div>
          </td>
        </tr>
        <tr>
          <td>Handoff</td>
          <td>
            <div>
              <br>
              <br>
              <button type="button" id="EditBtn" class="btn btn-info" onclick='onEdit();'>Edit</button> &nbsp;&nbsp;
              <button type="button" id="deleteBtn" class="btn btn-info" onclick='onReset();'>Delete</button>


            </div>
          </td>
        </tr>
      </tbody>
    </table>

Answer 1

首先，您需要输入字段，因此您可以编辑文本字段。您可能想看看这个https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text。

因此，如果您希望表格稍后可以在按钮上进行编辑，则我最好的选择和最简单的选择就是单击并单击以禁用disable属性。