时间戳

首页 > 解决方案 > 单击HTML中的编辑按钮时如何使表格（文本）中的字段可编辑

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

问题描述

我已经将几个硬编码值放入我的表中的单列和其他列中，每行都有按钮 EDIT 和 DELETE。每当我单击第一行中的编辑选项时，第一列和同一行中存在的值必须是可编辑的。同样对于删除，必须删除整行。还将有一个添加选项，其中必须使用编辑和删除按钮填充行

代码

<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>

标签： jqueryhtml

解决方案

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

因此，如果您想要稍后可以在按钮上编辑的表格，那么我最好的选择和最简单的方法就是让您拥有并单击以删除禁用属性。

推荐阅读