使整个行成为可单击的表

Question

我有一个包含多列和多行的表。我想能够点击任何<tr>，它打开一个新的/相同的标签页。

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

我已经看到了解决方案，这样做与jquery (https://electrictoolbox.com/jquey-make-entire-table-row-clickable/)。

我怎么能做到这一点，只是普通的香草JS?我怎么能做到这一点，只是使用D3.js?

Answer 1

只需使用click o doubleClick事件

1. on load event for verify document is ready to attach events点击元素
2. 获取table和children (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>