Question

我正在尝试获取input textbox的值并将值插入同一行中的td。

这是我的HTML代码：

<table class="test">  
  <tr ><td class="x"><input type="text" class="testinp"></td><td class="y">Fish</td><td class="z">Chicken</td></tr>
  <tr ><td class="x"><input type="text" class="testinp"></td><td class="y">Cricket</td><td class="z">Tenis</td></tr>
  <tr ><td class="x"><input type="text" class="testinp"></td><td class="y">Watch</td><td class="z">Hat</td></tr>
</table>

这是我的jQuery代码：

$('.testinp').keypress(function(e){
  if(e.which == 13){
    var val =  $(this).val();
    $(this).find('td').closest('.z').html(val);            
  }
});

现在我收到了值，但无法将其插入到td中。

Answer 1

.find()在selector的后代中查找input，而不是父母。所以你需要使用$(this).closest('td')。

然后，您可以像这样使用.siblings()：

$(this).closest('td').siblings('td.z').text(val);

或

获取最近的tr，然后找td个z类：

$(this).closest('tr').find('td.z').text(val);

Answer 2

您可以使用siblings()查找“z”

类

$('.testinp').keypress(function(e){
    if(e.which == 13){
        var val =  $(this).val();
        $(this).closest('td').siblings('td.z').text(val);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="test">  
      <tr ><td class="x"><input type="text" class="testinp"></td><td class="y">Fish</td><td class="z">Chicken</td></tr>
      <tr ><td class="x"><input type="text" class="testinp"></td><td class="y">Cricket</td><td class="z">Tenis</td></tr>
      <tr ><td class="x"><input type="text" class="testinp"></td><td class="y">Watch</td><td class="z">Hat</td></tr>
</table>

Answer 3

在这里，您可以再使用一个解决方案

$('.testinp').keypress(function(e){
  if(e.which == 13){
      var val =  $(this).val();
      $(this).closest('tr').find('td.z').text(val);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="test">  
      <tr ><td class="x"><input type="text" class="testinp"></td><td class="y">Fish</td><td class="z">Chicken</td></tr>
      <tr ><td class="x"><input type="text" class="testinp"></td><td class="y">Cricket</td><td class="z">Tenis</td></tr>
      <tr ><td class="x"><input type="text" class="testinp"></td><td class="y">Watch</td><td class="z">Hat</td></tr>
</table>

使用tr和查找closest

遍历td with class z

希望这会对你有所帮助。

Answer 4

尝试以下方法：

.find不会在DOM中出现，它会下降。因此，您将找不到输入字段下的任何td。

编辑：对不起，忘了删除。点。我复制并编辑了你的方法，当然应该说.next（“td”）。

Answer 5

试试这个

$('.testinp').keypress(function(e){
    if(e.which == 13){
        var val =  $(this).val();
        $(this).parent().parent().find('td').closest('.z').html(val);

    }
});

如何使用jQuery将数据插入到最近的td？

5 个答案: