Question

我有一个包含html控件的表格，例如a select等。现在，当我点击a代码时，我想在{{span中获得first值1}} 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

我尝试仅在点击popup时显示a，但每次点击td时都会弹出。{/ p>

所以我给了a标记了一个类Click并尝试实现同样但不能。

如何仅在a点击

时显示弹出窗口

Answer 1

a display:block为td，因此它保留了display:inline-block的整个空间。给你一个a。这将使library(ggplot2) ggplot(agg, aes(x=a, y=b)) + geom_bar(stat="identity") + scale_x_discrete(drop=FALSE)只占用它所需的空间。然后你的点击处理器就可以工作了。

Answer 2

您还可以在'a'标签内使用javascript函数onclick =“functionname（）”并在该函数中编写弹出代码。

Answer 3

此代码

$('tr > td a').on("click"...

向a添加点击处理程序，然后this里面是a，所以

$(this).parent()

给出了td

接着是

.find('td')

将尝试在td内找到td，但这不会发生

要获得第一个td使用closest让父母上升，直到找到目标，即：

$(this).closest('tr').find('td:first').find('span').html()

或

$("td:first > span", $(this).closest('tr')).html()

（或.eq(0)如果您不喜欢:first）

Answer 4

你可以在第一列中将一个类作为范围，例如myClass，如下所示：

<table>
    <tr>
        <th>Name </th>
        <th>Clicks</th>
        <th>Clicks2</th>
    </tr>
<tr>
    <td>
        <span class="myClass" 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>

，并使用这样的jQuery：

 $('td > a').on('click', function (e) {
     alert($(this).parents('tr').find(".myClass").html());
 });

请参阅here

Answer 5

只需从此

更改脚本即可

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

到此

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

这是一个jsFiddle：https://jsfiddle.net/CanvasCode/hdzswrn7/

如何在表格

5 个答案: