Question

我有一张表，其中每一行都有一个带有图像的列和一个用于描述图像的textarea字段。如何单击图像以检索textarea内容？

＆＃13;

$(document).ready(function() {

  $(document).on('click', '.image', function(e) {
    // logic here
   
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
  <tbody>
    <tr>
      <td> <img class="image" src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/female1-512.png" width="100">
      </td>

      <td>
        <textarea class="text"> observation 1 </textarea>
      </td>
    </tr>

    <tr>
      <td> <img class="image" src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/female1-512.png" width="100">
      </td>

      <td>
        <textarea class="text"> observation 2 </textarea>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

你可以使用.parent（）方法，然后使用.children（）方法，然后如果它是固定结构则转向textarea

Answer 2

此解决方案假定您当前的结构显示了一个双列表，其中第一列中的图像和第二列中的textarea。从本质上讲，该解决方案假设由于图像位于第一列，它将在第2列中找到包含<td>的{{1}}并从中获取文本<textarea>内容。 HTH。

val()

$(document).ready(function() {

  $(document).on('click', '.image', function(e) {
    // logic here
    var text = $(this).closest('td').next('td').find('textarea').val();
    console.log(text);
  });

});

从表中单击事件检索元素

2 个答案: