Question

我有一张表格如下;

<table>
<tr>
<th scope="col"></th>
<th scope="col">Column One</th>
<th scope="col">Column Two</th>
<th scope="col">Column Three</th>
<th scope="col">Column Four</th>
</tr>
<tr>
<th scope="row">Row One</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Row Two</th>
<td></td>
<td></td>
<td class="click"></td>
<td></td>
</tr>
<tr>
<th scope="row">Row Three</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Row Four</th>
<td></td>
<td></td>
<td class="target"></td>
<td></td>
</tr>
<table>

我希望能够通过“点击”类点击<td>，然后提醒我<td>与一类目标相距多少行。（在上面的例子中，它将返回2）。

表中可能还有其他<td>元素，其中包含一类目标。我只对与'td在同一行中的 next 目标之前的行数感兴趣。我的“点击”<td>或其他列中的任何目标都应该被忽略。

如果在同一行中点击的元素之后没有其他“目标”<td>，则警报应显示为“没有其他目标”。

我希望这很清楚。

Answer 1

您可能会找到使用parent()和closest()以及兄弟姐妹，下一个，上一个等的组合的解决方案，基本上使用遍历方法来选择"td.target"

Answer 2

你的意思是这样吗？

var targetRowIndex = $('.target')[0].parentNode.rowIndex;

$(".click").bind("click",function(){
   alert( targetRowIndex - this.parentNode.rowIndex ); 
});

http://jsfiddle.net/BZDyr/3/

如果您意识到该代码中正在发生的事情，您可以自己实现其余的精确功能。

JQuery遍历表列

2 个答案: