Javascript 使用jquery查找前html元素

当用户单击span元素时，我必须在表中的前一行中搜索第一个输入元素，并返回td中包含输入元素的第一行的编号。例如，span位于表的第四行，第一个输入元素位于表的第二行。在这种情况下，当用户单击span元素时，我必须返回2。如何搜索前一行中的第一个输入元素

<script>
$("span").click(function(){
   $(this).parent().parent().prevUntil("tr > td:nth-child(1)>input").css({"color":"red"});
</script>
<table>
  <tr>
    <td><input></input>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>21<input></input></td>
    <td>22</td>
  </tr>
  <tr>
    <td>31</td>
    <td>31</td>
  </tr>
  <tr>
    <td><span>click</span></td>
    <td>42</td>
  </tr>
</table>

$（“span”）。单击（函数（）{
$（this.parent（）.parent（）.prevUntil（“tr>td:nth child（1）>input”）.css（{“color”：“red”}）；
11
12
21
22
31
31
点击
42

如果我的理解正确，那么

//dom就绪处理程序
jQuery（函数（$）{
$（“span”）。单击（函数（）{
var$tr=$（this）.closest（'tr'）.prevAll（“tr:has（input）”）.first（）；
警报（$tr.index（）+1）
$tr.css({
“颜色”：“红色”
});
});
})

11
12
21
22
31
31
点击
42

那是最后一行这是我在过去两个小时里一直在寻找的答案！