在表格单元格悬停时显示按钮以编辑并插入数据库

这个功能需要在前端页面引入JavaScript脚本来实现。主要分为以下几个步骤：

1. 定义鼠标悬停在单元格上时的事件，可以使用鼠标悬停事件onmouseover实现。在事件处理函数中，根据当前单元格的行列索引，获取对应的数据源中的数据，将数据更新到编辑页面上。

function editTableCell(evt) {
  // 获取当前单元格的行列索引
  var rowIndex = evt.target.parentNode.rowIndex;
  var colIndex = evt.target.cellIndex;

  // 获取对应的数据
  var data = dataSource[rowIndex][colIndex];

  // 更新编辑页面中的文本框
  document.getElementById("edit-input").value = data;
}

2. 定义点击编辑按钮后的事件，可以使用按钮的点击事件onclick实现。在事件处理函数中，将编辑页面中的数据更新到数据源中，同时更新表格单元格的显示。

function saveData() {
  // 获取编辑页面中的数据
  var data = document.getElementById("edit-input").value;

  // 更新数据源
  dataSource[rowIndex][colIndex] = data;

  // 更新表格单元格的显示
  var cell = table.rows[rowIndex].cells[colIndex];
  cell.innerHTML = data;

  // 隐藏编辑页面
  hideEditPage();
}

3. 定义插入数据库的事件，可以使用AJAX技术将数据异步提交到后端服务器，从而实现插入数据库的功能。

function insertData() {
  // 获取所有数据
  var data = [];
  for (var i = 0; i < dataSource.length; i++) {
    data.push(dataSource[i].join(","));
  }

  // 异步提交数据
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/insert", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      alert("插入成功！");
    }
  };
  xhr.send("data=" + encodeURIComponent(data.join(";")));
}

以上就是实现这个功能的主要步骤。可以将这些脚本打包成一个单独的JavaScript文件，在页面中引入即可。在表格单元格上悬停时，会自动显示编辑按钮，点击编辑按钮后会弹出编辑页面，可以修改数据并保存，最后点击插入数据库按钮即可将数据插入到后端数据库中。

## 代码示例

下面是一个简单的示例，假设有一个名为`table`的HTML表格元素和一个名为`dataSource`的数据源，其中`dataSource`是一个二维数组，保存了表格中的所有数据。

```html
<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

var table = document.getElementById("table");
var dataSource = [
  ["1", "2", "3"],
  ["4", "5", "6"],
  ["7", "8", "9"]
];

// 监听鼠标悬停事件，显示编辑按钮
table.addEventListener("mouseover", function(evt) {
  if (evt.target.tagName == "TD") {
    var cell = evt.target;
    cell.innerHTML += "<button onclick='editTableCell(event)'>编辑</button>";
  }
});

// 隐藏编辑页面
function hideEditPage() {
  document.getElementById("edit-page").style.display = "none";
}

// 监听编辑页面中的保存按钮，保存数据
document.getElementById("save-button").addEventListener("click", saveData);

// 监听插入数据库按钮，将数据插入后端数据库中
document.getElementById("insert-button").addEventListener("click", insertData);

<div id="edit-page" style="display:none">
  <input type="text" id="edit-input">
  <button id="save-button">保存</button>
</div>
<button id="insert-button">插入数据库</button>

注意，上述示例只是一个简单的演示，实际应用中需要根据具体需求进行修改。另外，需要注意数据安全性，避免用户输入恶意脚本等，可以通过前后端的输入验证和过滤来实现。