javascript - 使整行成为可点击的表格

Question

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

我不想<td>在 an 内添加我的文本/值，<a>因为这样 tr 的某些部分将不接受点击打开链接。我的光标必须悬停在某些文本上。

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

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

标签： javascripthtmljqueryd3.js

Answer 1

只需使用 click o doubleClick 事件

1. 用于验证文档的加载事件已准备好附加事件单击元素
2. 只是得到桌子和孩子（tr）
3. 使用 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>