问题选择 TD 标签内的输入

Question

我有一个 html 像：

<table id="table1">  
  <tr>  
    <td>TEXT</td>  
    <td><input type="number" value="1"></td>  
    <td><input type="number" value="2"></td>  
    <td><input type="button" class="go" value="go"></td>  
  </tr>  
  <tr>  
    <!-- same structure above -->  
  </tr>  
</table>

我正在尝试使用 Jquery.

定位输入（类型编号）

我试过两种方法：

#1：

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td input:nth-child(2)').val();
});

和#2：

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td:nth-child(2) input').val();
  g = $(this).closest('tr').find('td:nth-child(3) input').val();
});

在第一个中，'g' 的值未定义（'p' 是正确的），在第二个中，'p' 未定义（'g' 是正确的） ).

有人可以向我解释为什么会这样，而我无法为两个变量获得正确的值吗？提前致谢！

Answer 1

nth-child 基本上是指在每个符合条件的匹配条件中找到 nth-child。由于您有 find('td input:nth-child(2)') ，这意味着在每个 td 中找到第二个输入事件。由于每个 td 只有 1 个输入，如果会给你 undefined.

我建议使用从第 0 个索引开始的 .eq() 选择器。

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td input').eq(1).val();
});

示例：https://jsfiddle.net/DinoMyte/s51sayvc/1/

或

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td').eq(2).find('input').val();
});

示例：https://jsfiddle.net/DinoMyte/s51sayvc/2/

Answer 2

您可以像下面这样使用 :eq() 选择器。

$('#table1').on('click', '.go', function () {
    var tr = $(this).closest('tr');
    var faixa = tr.find('td:first').text(),
    p = tr.find('td input:eq(0)').val(),
    g = tr.find('td input:eq(1)').val();

    console.log(faixa, p, g);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
    <tr>
        <td>TEXT</td>
        <td><input type="number" value="1"></td>
        <td><input type="number" value="2"></td>
        <td><input type="button" class="go" value="go"></td>
    </tr>
</table>

Answer 3

:nth-child() 从 0 开始计算元素，因此要获取第一个元素，您必须键入：:nth-child(0)（所以它与 :first 相同），对于第二个元素：:nth-child(1)。

所以第一种方法适用于代码：

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td input:nth-child(1)').val(); 
});

对于第二种方法，它应该是这样的：

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td:nth-child(0) input').val();
  g = $(this).closest('tr').find('td:nth-child(1) input').val();
});

问题选择 TD 标签内的输入

Issue selecting inputs inside TD tags

html

jquery

jquery-selectors