如何在JQuery的同一<tr>中从另一个<td>引用一个<td>？

TheLearner 发表于 Dev

学习者

我有一个具有以下结构的HTML表：

<tr>
   <td>123</td>
   <td ondblclick="makeeditable(this);">this is some text</td>
   <td><span ondblclick="makeeditable(this);">this is some more text</span><span>flag</span></td>
</tr>

我写一个jQuery代码段，使第二<td>和第一<span>，第三<td>用户可编辑双击（对于它的价值，正在动态生成的表）：

function makeeditable(cell){
    var OriginalContent = $(cell).text();
    $(cell).html("<input id='editcell' class='input' type='text' value='" + OriginalContent + "' />");
    $(cell).children().first().focus();
    $(cell).children().first().keypress(function (e) {
        if (e.which == 13) {
            var newContent = $(this).val();
            $(this).parent().text(newContent);
        }
    });
    $(cell).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
    });
}

使用上面的功能，我成功地使单元格可编辑。不过，现在我需要以某种方式获取（文本第一内侧行参考号<td>，123刚编辑的单元格在这个例子中）。我的问题是，一个人如何可以参考第一<td>行从第二的情况下<td>在同一行，并从那<span>内又<td>在同一行的？

里克·希区柯克

访问第一TD行中的任一TD或者SPAN，使用.closest('tr').find('td:first')。

这是您的代码的简化版本：

$('.editable ').dblclick(function() {
  var $self= $(this),
      OriginalContent = $(this).text();

  $self.closest('tr').find('td:first').text('Editing');
  
  $self
    .html('<input class="input" type="text" value="' + OriginalContent + '"/>')
    .find('input')       //the following methods now refer to the new input
    .focus()
    .keypress(function(e) {
      if (e.which === 13) {
        $self.text($(this).val());
      }
    })
    .blur(function() {
      $self.closest('tr').find('td:first').text('Double-click to edit');
    
      $self
        .text(OriginalContent)
    });
});

td {
  border: 1px solid #ddd;
}

.editable {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Double-click to edit</td>
    <td class="editable">this is some text</td>
    <td><span class="editable">this is some more text</span><span>flag</span>
    </td>
  </tr>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。