在表格行悬停时调用函数

Posted 2023-05-09

【中文标题】在表格行悬停时调用函数

【英文标题】：Call Function on Tabel Row Hover

【发布时间】：2021-05-24 18:06:43

【问题描述】：

我想调用一个函数，每次我将鼠标悬停在表格中时，它都会打印一行的内容。到目前为止，我有这个：

function tablemouseover(event) 
  console.log(event.target);

<table>
  <tr onmouseover='tablemouseover(event)'>
    <td>times[row]</td>
    <td>locations[row][0]</td>
    <td>locations[row][1]</td>
    <td>AllDistances[row]m</td>
  </tr>
</table>

但这只是让我<td> 我被悬停在上面。

【问题讨论】：

听起来很好地使用了useCapture 参数到addEventListener。

这能回答你的问题吗？ Get td value from specific tr (with mouse hover)

【参考方案1】：

您可以通过调用textContent 来获取单元格的文本。如果您想要 col/row 索引，您可以通过抓取元素在其行或表（正文）中的位置索引来获取它们。

const getChildIndex = node => 
  Array.prototype.indexOf.call(node.parentNode.children, node);

function tablemouseover(event) 
  const
    row = event.currentTarget,
    col = event.target,
    rowIndex = getChildIndex(row),
    colIndex = getChildIndex(col),
    allText = [...row.children].map(td => td.textContent);
  
  console.log(`Cell ($colIndex, $rowIndex): $event.target.textContent`);
  console.log(`Row [$rowIndex]: $JSON.stringify(allText)`);

table, th, td  border: thin solid grey; 
table  border-collapse: collapse; 
th, td  padding: 0.5em; 

.as-console-wrapper  max-height: 5.25em !important; 

<table>
    <tr onmouseover='tablemouseover(event)'>
      <td>times[row]</td>
      <td>locations[row][0]</td>
      <td>locations[row][1]</td>
      <td>AllDistances[row]m</td>
    </tr>
    <tr onmouseover='tablemouseover(event)'>
      <td>times[row]</td>
      <td>locations[row][0]</td>
      <td>locations[row][1]</td>
      <td>AllDistances[row]m</td>
    </tr>
</table>

【参考方案2】：

使用 closest('tr') 在 DOM 树中搜索最近的 tr 父级，然后记录其 innerhtml，如下所示：

function tablemouseover(event)
   console.log(event.target.closest('tr').innerHTML);

<table>
<tr onmouseover='tablemouseover(event)'>
<td>times[row]</td>
<td>locations[row][0]</td>
<td>locations[row][1]</td>
<td>AllDistances[row]m</td>
</tr>
</table>

【参考方案3】：

使用onmouseenter 而不是onmouseover

Read what different between

function tablemouseover(event)
       console.log(event.target.innerHTML);
    

<table>
    <tr onmouseenter ='tablemouseover(event)'>
    <td>times[row]</td>
    <td>locations[row][0]</td>
    <td>locations[row][1]</td>
    <td>AllDistances[row]m</td>
    </tr>
    </table>