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

Question

我有一个具有以下结构的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>和第三个<td>中的第一个<span>可以通过双击进行用户编辑（对于它的价值，该表是动态生成的）：

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>？

Answer 1

要访问TD或SPAN行中的第一个TD，请使用 .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>

Answer 2

var parent = $(cell).parent(); 
while(parent.get(0).tagName != "TR")
    parent = parent.parent();
var referenceLine = parent.children('td')[0];
// here is your reference
console.log(referenceLine.innerText);

只是想补充一点，里克希区柯克的答案很好并且实现得很好，但 .parent（） 和 .children（） 方法比 .closest（） 和 .find（） 方法快 3 倍以上：检查这里并运行测试。