Question

我有这段代码

<tr><td id="name">TEXT 1</td> 
<td><input type="button" class="button_add" value="Add" ></td></tr>
<tr><td id="name">TEXT 2</td> 
<td><input type="button" class="button_add" value="Add" ></td></tr>

我想点击按钮来读取当前元素td的值。例如：“这是你的文字：TEXT1” -

我在jQuery中的代码是：

$('.button_add').click(function() {
    var name = $(this).attr("#name").html();
    alert('This is your text' + name);
});

但是当我点击按钮时，我收到以下错误：

TypeError：$（...）。attr（...）未定义

它不起作用。我错过了什么？

Answer 1

元素的ID必须是唯一的，因此请将name用作类而不是ID。

由于您需要在同一个tr中使用td的值，因此请使用.closest查找tr，然后使用类选择器查找td

$('.button_add').click(function() {
  var name = $(this).closest("tr").find('td.name').html();
  //or since the target td is the previous sibling of the button's parent element
  //  var name = $(this).parent().prev().html();

  alert('This is your text' + name);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="name">TEXT 1</td>
    <td>
      <input type="button" class="button_add" value="Add">
    </td>
  </tr>
  <tr>
    <td class="name">TEXT 2</td>
    <td>
      <input type="button" class="button_add" value="Add">
    </td>
  </tr>
</table>

从元素检索文本时未定义

1 个答案: