0

我想让整个表格行可点击,包括空格。我已经看到了使用 JavaScript 和 TR 上的点击处理程序的方法,或者只是将每个 TD 设置为 display:block。

皱纹是我还希望在该行中有一些文本链接到其他地方,但不会触发整个其余行的基础链接。本质上,这个特殊的文本就像一个“徽章”。

像这样的东西:

T = Text
B = Badge
W = Whitespace

行中的单个单元格可能如下所示:

TTTTT BB WWWWWWWWWWWWWWWWWWW

单击 T 和 W 将转到一个链接,这是通常的情况。但是点击 B 会在新窗口中打开一个不同的链接,并且不会在主窗口中打开原始链接。

寻找正确方向的指针,这是否可以用纯 HTML/CSS 或 JavaScript 等完成。谢谢,

4

2 回答 2

2

您可以使用 A 元素进行导航,然后如果该行从其中获得点击,则忽略它。

<tr onclick="doSomething(event);">
  <td>
    <a href="…">TTTTT</a><a href="…">BB</a>WWWWWWWWW…


function doSomething(evt) {
  var tgt = evt.target || evt.srcElement;
  if (tgt && tgt.tagName.toLowerCase() == 'a' && tgt.href) {
    // don't do click action
    return;
  } 
  // do click action
}

哦,不要让 TRs display: block因为它们应该是display: table-cell

于 2012-04-10T02:14:03.213 回答
1

查看事件的targetFF/Chrome/Safari 或srcElementIE 属性。即使您正在收听 TR 上的事件,您也应该看到event.target实际点击的内容。然后,您可以查看元素(或其父元素)以确定要采取的操作。更多细节:https ://developer.mozilla.org/en/DOM/event.target

于 2012-04-10T02:13:26.567 回答