使整行成为可点击的表格[关闭]答案

【问题标题】：Make an entire row a table clickable [closed]使整行成为可点击的表格[关闭]
【发布时间】：2021-05-30 12:13:12
【问题描述】：

我有一个包含多列和多行的表。我希望能够点击任何<tr> 并在新/相同选项卡中打开一个页面。

我不想在<a> 中添加我的<td> 文本/值，因为这样就会有 tr 的某些部分不接受点击打开链接..我的光标必须悬停在一些文字。

我已经看到了使用 jquery (https://electrictoolbox.com/jquey-make-entire-table-row-clickable/) 执行此操作的解决方案。

我怎么能用普通的 JS 做到这一点？我如何仅使用 D3.js 来做到这一点？

【问题讨论】：

向我们展示您的尝试。 SO 不是免费的代码编写服务。此处的目的是让您发布解决自己问题的尝试，并在其他人无法按预期工作时提供帮助。见How to Ask 和minimal reproducible example
@charlietfl 起初我以为我不清楚我的解决方案和我目前在这个问题上的进展（因为你的评论），但是另一个 SO 用户点击了链接并建立了连接并回答了.列出了我尝试过的当前解决方案..每个 td 内都有锚标签..但我不希望这样。我目前拥有的解决方案是在我发布的那个链接中复制和粘贴那个 jQuery 示例（否则是一个“最小”的可重现示例）。我真的不想张贴文字墙，因为我不喜欢阅读它们，我觉得链接已经是多余的了。
答案应该是自包含的。我们不必离开现场来审查您的问题。如果您在问题编辑器中单击<>，您甚至可以在页面的此处制作可运行的演示
@charlietfl 好的。一定是新功能。。好久没发帖了。感谢您的信息。

标签： javascript html jquery d3.js

【解决方案1】：

只需使用 click o doubleClick 事件

在加载事件时验证文档已准备好附加事件点击元素
只需获取桌子和儿童 (tr)
使用 forEach（迭代）附加甚至点击或 dbclick tr.onclick = yourfunction

查看此示例，获取链接的基表并添加我的自定义 js

// attach event onLoad (onready wih jQuery)
document.addEventListener("DOMContentLoaded", onLoad);
window.addEventListener("load", onLoad);

function onLoad() {
  const table = document.getElementById("example")
  clickableRows(table, onClickRow)
}

/*
Event onClick Row
*/
function onClickRow(mouseEvent) {

  const clickedRow = mouseEvent.target.tagName = "TD" ? mouseEvent.target.parentElement : mouseEvent.target;
  console.log(mouseEvent, clickedRow);
  alert("click on cell with text << " + mouseEvent.target.innerText + " >>");
}
/*
Add click event each row (TR tags)
*/
function clickableRows(tableElement, clickEvent) {
  if (!tableElement || (tableElement && tableElement.tagName !== 'TABLE')) return;
  const rows = tableElement.querySelectorAll("tr");
  rows.forEach(row => {
    // override onclick event, all TR will use same function on trigger event click
    // row.onclick = clickEvent;
    // maybe u want double click instead click    
    row.ondblclick = clickEvent;
  })
}

table#example {
  border-collapse: collapse;
  border: 3px solid #ccc;
}

#example tr {
  background-color: #eee;
  border-top: 2px solid #ccc;
}

#example tr:hover {
  background-color: #ccc;
}

#example th {
  background-color: #fff;
}

#example th,
#example td {
  padding: 3px 5px;
}

#example td:hover {
  cursor: pointer;
}

<table id="example">
  <tr>
    <th>&nbsp;</th>
    <th>Name</th>
    <th>Description</th>
    <th>Price</th>
  </tr>
  <tr>
    <td><a href="apples">Edit</a></td>
    <td>Apples</td>
    <td>Blah blah blah blah</td>
    <td>10.23</td>
  </tr>
  <tr>
    <td><a href="bananas">Edit</a></td>
    <td>Bananas</td>
    <td>Blah blah blah blah</td>
    <td>11.45</td>
  </tr>
  <tr>
    <td><a href="oranges">Edit</a></td>
    <td>Oranges</td>
    <td>Blah blah blah blah</td>
    <td>12.56</td>
  </tr>
</table>

【讨论】：