Question

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

表：

＆＃13;

/media/test/tmpUpload

array(5) 
{
  ["name"]=>
  string(51) "xxxxxxxxxxxxxxxx.pdf"
  ["type"]=>
  string(15) "application/pdf"
  ["tmp_name"]=>
  string(14) "/tmp/phpe2mutM"
  ["error"]=>
  int(0)
  ["size"]=>
  int(774476)
}

＆＃13;

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

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

HTML表格可编辑单元格

1 个答案: