Question

我正在编写一个页面，用于从数据库表中获取信息并将其放入HTML表中。然后我使用jQuery使任何<td>单元格在被点击时可编辑，现在我正在尝试使用jQuery keyup函数来检测可编辑单元格的编辑时间，然后使用ajax用编辑后的信息更新数据库。当按下数字，字母和空格键时，键盘正在拾取，但由于某种原因，当按下退格键，删除键或输入键时它没有拾取。我不确定我的代码中是否有错误或可能导致此错误。

任何意见或建议都非常有用，非常感谢！

这是我用于click事件的jQuery，然后是keyup以及快速表示例：

＆＃13;

$('td').click(function() {
  var val = ($(this).siblings().first().text());
  var col = $(this).parent().children().index($(this));

  $(this).prop('contenteditable', true);

  $(this).keyup(function() {
    $.ajax({
        method: "POST",
        url: "updatedatabase.php",
        data: {
          content: $(this).text(),
          date: val
        }
      })
      .done(function(msg) {
        alert("Data Saved: " + msg);
      });
  });
});

＆＃13;

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 90%;
}
th, td {
  padding: 8px;
}
td {
  text-align: center;
}
table {
  margin: 0 auto;
}
td:click {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th></th>
    <th>22oz Dark</th>
    <th>12ct 4oz Dark</th>
  </tr>
  <tr>
    <th>2016-01-01</th>
    <td>9785</td>
    <td>2478</td>
  </tr>
  <tr>
    <th>2016-01-02</th>
    <td>8754</td>
    <td>2136</td>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td>13587</td>
    <td>2203</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td>14111</td>
    <td>3297</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td>13212</td>
    <td>3101</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td>16335</td>
    <td>3299</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td>15421</td>
    <td>3100</td>
  </tr>
</table>

＆＃13;

Answer 1

要获取更改，您可以发现input事件非常有用：它甚至会触发通过鼠标或上下文菜单进行的更改（想想复制/粘贴，等等）。

您还应该从外部事件处理程序中取出内部事件处理程序。正如您现在所拥有的那样，每次单击相同的keyup元素时，您将累积td个事件处理程序的数量。

此外，我认为您不希望用户更改第一列，因为它包含您发送到服务器的密钥。

所以这就是我的建议：

// exclude first column from jQuery selection:
$('td').not(':first').click(function() {
  $(this).prop('contenteditable', true);
});

// Use input event, and define it outside of above event handler:
$('td').on('input', function() {
  console.log('event');
  $.ajax({
    method: "POST",
    url: "updatedatabase.php",
    data: {
      content: $(this).text(),
      date: $(this).siblings().first().text() // calculate on-the-spot
    }
  })
  .done(function(msg) {
    alert("Data Saved: " + msg);
  });
});

与您的问题无关：当用户点击单元格时，您可以编辑内容。你之后永远不会把它变成不可编辑的，所以你可能想知道为什么你从一开始就不能让它们全部可编辑......

转义码输入的密钥问题

1 个答案: