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>用户可编辑的第二个<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> {{1}}同一行？

Answer 1

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

以下是您的代码的简化版本：

＆＃13;

$('.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)
    });
});

＆＃13;

td {
  border: 1px solid #ddd;
}

.editable {
  background: yellow;
}

＆＃13;

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

＆＃13;

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);

只是想补充一点，Rick Hitchcock的答案很好并且实现得很好但是.parent（）和.children（）方法比.closest（）和.find（）方法快3倍以上：{ {3}}

如何在JQuery中相同引用？

2 个答案: