Question

当用户使用下面的代码点击表格行中的任意位置时，我创建了Colorbox弹出窗口。现在我只想在有人点击第二列时打开弹出窗口。

$(".inline").colorbox({inline:true, width:"50%"});

<tr class="inline" href="#123">
    <td>Name</td>
    <td>Address</td>
</tr>

<div style='display:none'>
     <div id='123' class="colorbox_content">
          <p><strong>Title Here</strong></p>
          <p>Description</p>
     </div>
</div>

我尝试在td上应用课程，并尝试将jQuery从$(".inline")更改为$("table td #2")，但没有任何效果。

Answer 1

尝试：

$('table > tbody > tr > td:nth-of-type(2)').colorbox({inline:true, width:"50%"});

您可以使用较短的选择器，您必须进行实验。在那里有一个> tbody，无论你是否放置，因为浏览器默认将它放在那里。遍历DOM时，记住表格是一件很重要的事情。

<强>段

$('table > tbody > tr > td:nth-of-type(2)').css('background', 'red');

td {
  border: 2px solid black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Answer 2

单击表格单元格时，事件将传播到表格行。

足以阻止点击事件的传播。

如果您使用https://github.com/jackmoore/colorbox，则无法将颜色框附加到第二个单元格，因为您已使用href属性将颜色框附加到表格行。

所以，我的建议是：

$(".inline").colorbox({
  inline: true, width: "50%",
  open: false
});
$(".inline td").on('click', function (e) {
  if ($(this).index() != 1) {
    e.stopPropagation();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/colorbox/master/jquery.colorbox-min.js"></script>

<table>
    <tbody>
    <tr class="inline" href="#123">
        <td>Name</td>
        <td>Address</td>
    </tr>
    </tbody>
</table>

<div style='display:none'>
    <div id='123' class="colorbox_content">
        <p><strong>Title Here</strong></p>

        <p>Description</p>
    </div>
</div>

Colorbox弹出特定表列而不是行

2 个答案: