HTML表格可编辑单元格答案

【问题标题】：HTML table editable cellsHTML表格可编辑单元格
【发布时间】：2018-02-22 16:41:56
【问题描述】：

有没有一种简单的方法可以使 html 表格可编辑？我有一个简单的表格，有 2 个标题和 4 个 tds，每行末尾有一个使用引导 MUI 类的编辑按钮。有没有办法在不改变一切的情况下让我的表格可编辑？我需要的是单击我的单元格并编辑单元格以获取新信息，当我单击编辑按钮时，我可以传递到后端。

表：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class='mui-row'>
    <td class='mui-col-md-6'>1</td>
    <td class='mui-col-md-2'>1</td>
    <td class='mui-col-md-2' style='border:none'>
      <input type="checkbox" class="check">
    </td>
    <td>editButton</td>
  </tr>
  <tr class='mui-row'>
    <td class='mui-col-md-6'>2</td>
    <td class='mui-col-md-2'>2</td>
    <td class='mui-col-md-2' style='border:none'>
      <input type="checkbox" class="check">
    </td>
    <td>editButton</td>
  </tr>
  <tr class='mui-row'>
    <td class='mui-col-md-6'>3</td>
    <td class='mui-col-md-2'>3</td>
    <td class='mui-col-md-2' style='border:none'>
      <input type="checkbox" class="check">
    </td>
    <td>editButton</td>
  </tr>
</table>

我只需要知道如何使单元格可编辑并获取已编辑单元格的所有信息，甚至是未在同一行中编辑的单元格。

【问题讨论】：

我查找了数据表，我根据提示进行了编辑，但我不想在需要在单元格上编辑的提示下进行编辑

标签： html html-table

【解决方案1】：

要编辑文本，您需要在表格单元格中输入内容。所以你可以这样：通过单击表格单元格，您实际上单击了可以编辑文本的输入。这是最好的方法。

像这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
  input[type=text] {
    border: none;
    width: 25px;
  }
</style>

<table>
  <tr class='mui-row'>
    <td class='mui-col-md-6'><input type="text" value="1"></td>
    <td class='mui-col-md-2'><input type="text" value="1"></td>
    <td class='mui-col-md-2' style='border:none'>
      <input type="checkbox" class="check">
    </td>
    <td>editButton</td>
  </tr>
  <tr class='mui-row'>
    <td class='mui-col-md-6'><input type="text" value="2"></td>
    <td class='mui-col-md-2'><input type="text" value="2"></td>
    <td class='mui-col-md-2' style='border:none'>
      <input type="checkbox" class="check">
    </td>
    <td>editButton</td>
  </tr>
  <tr class='mui-row'>
    <td class='mui-col-md-6'><input type="text" value="3"></td>
    <td class='mui-col-md-2'><input type="text" value="3"></td>
    <td class='mui-col-md-2' style='border:none'>
      <input type="checkbox" class="check">
    </td>
    <td>editButton</td>
  </tr>
</table>

【讨论】：