使用 JS onclick 使特定表跨度的内容可编辑

Question

我有一个简单的表格，我试图在按下每个值旁边打印的编辑​​按钮后允许字段值变为 contenteditable：

 <table>  
 <tr>  
 <th>Variable A</th>  
 <th>Variable B</th>  
 <th>Variable C</th>  
 <tr>  
 <td><span id="field">Value A</span> <button type="button" class="result">EDIT</button></td>  
 <td><span id="field">Value B</span> <button type="button" class="result">EDIT</button></td>  
 <td><span id="field">Value C</span> <button type="button" class="result">EDIT</button></td>   </tr> 
 </table>

我在点击编辑按钮时使用以下 jQuery

 $( document ).ready(function() {
        $("body").on('click', '.result', function() {
         var update = $(this).closest('td');
         document.getElementById('field').contentEditable = true;
         update.append('<button class=\"result\">Save</button></td>');
         $(this).remove();
    });
  });

不幸的是，当我单击“编辑”按钮时，只有第一个字段（值 A）变为可编辑的。我认为这是因为

 document.getElementById('field').contentEditable = true;

仅更新 id='field' 的第一个实例

但我试图让它只更新我按下按钮旁边的字段。因此，如果我单击第三个编辑按钮，它应该使值 C 字段可编辑。相反，它只做 Value A。

我意识到我需要使其特定于那个跨度。但没有找到解决方案。我试过了：

$(this).closest('.field').contentEditable = true;

但是，如果我这样做，那么跨度将无法编辑。我知道这可能是一个简单的问题，但我尝试了各种选择都无济于事。

Answer 1

您可以使用.prev() 选择button 之前的span，并且id 应该始终是唯一的，所以我将id field 更改为field_1、field_2、field_3，然后我'已将update.contentEditable = true; 替换为update[0].contentEditable = true;：

$("body").on('click', '.result', function() {
   var update = $(this).prev('span');
   var td = $(this).closest('td');
   update[0].contentEditable = true;
   td.append('<button class=\"result\">Save</button></td>');
   $(this).remove();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Variable A</th>
    <th>Variable B</th>
    <th>Variable C</th>
    <tr>
      <td><span id="field_1">Value A</span> 
        <button type="button" class="result">EDIT</button>
      </td>
      <td><span id="field_2">Value B</span> 
        <button type="button" class="result">EDIT</button>
      </td>
      <td><span id="field_3">Value C</span> 
        <button type="button" class="result">EDIT</button>
      </td>
    </tr>
</table>