获取具有输入的下一个td

Question

我有许多适用于此的表，但这是一个示例：

Cars
 VIN   | Price  | Color  | Financing | Year | Action
=======+========+========+===========+======+========
 1234  | ______ | Blue   | _________ | 2012 | Submit
-------+--------+--------+-----------+------+--------
 2233  | ______ | Red    | _________ | 2016 | Submit

空格为输入（<input type="text">），该表代表普通的html表。 Submit是也应视为输入的按钮。

鉴于tr中td的索引，我需要返回下一个具有输入的td。

因此，如果起始索引为0或$(tr).find('td').eq(0)，则需要1或$(td)。如果起始索引为2，则需要3。我以前使用递归函数来执行此操作，但是它给出了一些奇怪的结果。

这里是fiddle。

Answer 1

您可以使用过滤器

function getIndex(usedIndex) {
  var $tds = $('tr:first-child td');                                        // only need to get first row if all the same layout

  var $td = $tds.filter(function() {
    var $thisTd = $(this);
    return $tds.index($thisTd) > usedIndex && $thisTd.find('.textbox').length; // filter for if the td index is higher than the entered one and it has a input as a child
  }).eq(0);                                                                 // get the first one
  
  return  $tds.index($td);
}

console.log(getIndex(1))
console.log(getIndex(4))

td.red input {
  border-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>test</td>
    <td>test</td>
    <td><input type="text" name="test" class="textbox"></td>
    <td>test</td>
    <td>test</td>
    <td><input type="text" name="test1" class="textbox"></td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td><input type="text" name="test3" class="textbox"></td>
    <td>test</td>
    <td>test</td>
    <td><input type="text" name="test4" class="textbox"></td>
  </tr>
</table>