javascript - td 在表格中单击时如何获取值

Question

我有一个带有 html 控件的表格，例如 a select 等。现在当我点击 a 标签时，我想得到span 值在 first td

我试过这个:

$('tr > td a').on('click', function(e) {
  alert($(this).parent().find('td').eq(0).find('span').html());
});

table, tr, td, th {
  width: 750px;
  border: 1px solid black;
  border-collapse: collapse;
  align: centre
}
select, a {
  display: block;
}

<table>
  <tr>
    <th>Name</th>
    <th>Clicks</th>
    <th>Clicks2</th>
  </tr>
  <tr>
    <td>
      <span id="span1">Hi!</span>
      <a href="#">Save</a>
    </td>
    <td style="block">
      <a href="#" class="Click" id="click1">Click Me</a>
      <select>
        <option>1</option>
      </select>
    </td>
    <td>
      <a href="#" class="Click" id="click2">Click Me</a>
      <select>
        <option>2</option>
      </select>
    </td>
  </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Fiddle link

我试图仅在单击 a 时显示 popup 但每次单击 td 时它都会弹出。

所以我给 a 标签一个类 Click 并试图实现相同但不能。

如何仅在点击 a 时显示弹出窗口

Answer 1

你的 a 是 display:block 所以它维护了 td 的整个空间。给你一个 display:inline-block。这将使 a 只占用它需要的空间。然后您的点击处理程序就会工作。