javascript - 单击表格中的按钮后从上一行获取文本

Question

我看过很多类似问题的答案，但没有一个有效，我不知道该怎么做。

我有一个动态追加行的表。 一些行有 class="idRow"。

我需要在单击向下几行的按钮后获取该行的文本值(每次位置不同但始终位于 idRow 下方，按钮位于不同的行中每次，当我点击一个按钮时，我都不知道我需要哪一行，只是离它最近的那一行)

我知道该行已附加并且具有文本值。 我的问题是通过单击按钮来获取它。

我尝试了很多选择，比如

 alert($(".comnowBtn").parent().closest('tr').prev("#idRow").text());

我尝试添加 "parent()"，删除它，prev，closest，$("this") 而不是 $(".comnowBtn")，它们都是空的。

在其中一次迭代中，我设法获取了行内容，但那是在我处理整个表并仅获取所有 idRow 行时。

求助! 谢谢!

*我第一次没有很好地解释自己，我编辑了问题。 谢谢!

编辑: 对于每个想知道我做了什么的人- 我无法让“最接近”或“prev”工作，所以我在按钮行之后附加了 idRow(这样 idRow 总是在按钮下方)并使用了-

alert(   $(this).parents("tr").next(".idRow").text());

它有效，但它是一种解决方法...所以如果有人知道为什么“最近”或“上一个”不起作用，我将很高兴听到。 谢谢!

Answer 1

标识符 id 在同一文档中应该是唯一的，因此请尝试用通用类替换所有重复的 id，检查下面的示例。

希望这对您有所帮助。

---

$('body').on('click', '.comnowBtn', function(){
    alert( $(this).closest('tr').prev('.idRow').text() );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
  <tr class='idRow'><td>idRow row text 1</td></tr>
  <tr><td><button class='comnowBtn'>comnowBtn 1</button></td></tr>
  <tr class='idRow'><td>idRow row text 2</td></tr>
  <tr><td><button class='comnowBtn'>comnowBtn 2</button></td></tr>
</table>

---

如果你有像 idRow1 和 idRow2 这样的唯一 ID ...你可以使用以符号 ^ 开头的属性选择器:

$(this).closest('tr').prev("tr[id^='idRow']").text();

$('body').on('click', '.comnowBtn', function(){
    alert( $(this).closest('tr').prev("tr[id^='idRow']").text() );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
  <tr id='idRow2'><td>idRow row text 1</td></tr>
  <tr><td><button class='comnowBtn'>comnowBtn 1</button></td></tr>
  <tr><td>Some extra rows</td></tr>
  <tr><td>Some extra rows</td></tr>
  <tr id='idRow2'><td>idRow row text 2</td></tr>
  <tr><td><button class='comnowBtn'>comnowBtn 2</button></td></tr>
</table>