许多令人满意的元素

Question

我有一张看起来像这样的表：

<table id="guests" class="table table-striped table-bordered">
  <tbody>
    <tr>
      <td id="guest1Name">John</td>
      <td id="guest1Relationship">Family</td>
      <td id="guest1NumberInParty">1</td>
      <td id="guest1InvitationSent">No</td>
    </tr>
    <tr>
      <td id="guest2Name">Joe</td>
      <td id="guest2Relationship">Family</td>
      <td id="guest2NumberInParty">1</td>
      <td id="guest2InvitationSent">No</td>
    </tr>
  </tbody>
</table>

这个表很快会超过100行。我想要做的是为每个<td>提供contenteditable属性，并使用JavaScript / jQuery观察每个属性的更改，以便在编辑元素时，该元素的新数据可以使用AJAX发送到数据库（AJAX和服务器端部分已经完成）。我想使用onblur事件或类似的东西来做这件事，但我不知道如何观看所有这些元素（100行x 4个元素，每个= 400 +元素）以进行聚焦/模糊，并且能够确定哪一个做出了改变。如果我使用jQuery attributeStartsWith选择器选择它们，我可以观看所有这些，但是当其中一个失去焦点时，我怎么知道它是哪一个？

Answer 1

做这样的事情。首先为您的可编辑TD指定一个类，以便更容易选择。让我们说class =“editable”。

$(document).ready(function(){
    $('.editable').blur(function(e){
        //to get something from the li that was just blurred use this
        //something like - 
        var value = $(this).text();
        //Ajax call 
    });
});

在事件函数中使用this关键字将允许您定位事件被触发的元素。