javascript - 当鼠标悬停在 HTML 表格中的 TD 上时，有没有办法获取 TH 的值？

Question

我试图在将鼠标悬停在 TD 上后获取 TH 的值。当我将鼠标悬停在 TD 数据单元格上时，我能够获取它的值，但无法找到获取 TH 值的方法。

此 JavaScript 允许我单击 TD 来获取整行值，或者将鼠标悬停在特定单元格上来获取它的值。但是，我似乎找不到获得 TH 的方法。

$('#grid').click(function(evt) {
  var row = $(evt.target).parent('tr'); // Get the parent row
  var cell = $(evt.target); //Get the cell
  alert('Row data: ' + row.text());
  alert('Cell data: ' + cell.text());
});

$('#grid').on('mouseenter', 'td', function() {
  console.log($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id="grid">
  <table id="table1" border="1">
    <thead>
      <th>ID</th>
      <th>Name</th>
    </thead>
    <tbody>
      <tr>
        <td>101</td>
        <td>Jackie</td>
      </tr>
      <tr>
        <td>102</td>
        <td>Thomas</td>
      </tr>
    </tbody>
  </table>

Answer 1

您可以使用 HTML5 数据属性并为每个 td 设置 vvalue，而不是使用 javascript 或 jquery 遍历 DOM 来查找涉及的 th - 然后在点击时显示这一点(这里我正在安慰它的代码片段)。

$('#table td').on('click', function() {
    let col = $(this).attr('data-col');
    let content = $(this).text();
    console.log(col + ": " + content);
});

table {
border-collapse: collapse;
}
th {
  border: solid 1px #d4d4d4;
  border-bottom-width: 2px;
  padding: 5px 10px
}


td {
  border: solid 1px #d4d4d4;
  padding: 5px 10px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <th>ID</th>
    <th>Name</th>
  </thead>
  <tbody>
    <tr>
      <td data-col="ID">101</td>
      <td data-col="Name">Jackie</td>
    </tr>
    <tr>
      <td data-col="ID">102</td>
      <td data-col="Name">Thomas</td>
    </tr>
  </tbody>
</table>

或者 - 您可以有一个包含 th 内容的数组(特别是如果您动态创建表) - 然后单击 td - 在其 tr 中获取其索引(同样，您可以将其存储在数据属性中 -或作为 id - 然后使用该索引来引用数组。

这可能是更好的方法，使用数组或对象动态创建表，然后您就已经拥有了可以引用内容的数据源。

   var columns = ['ID','Name'];
   
   $('#table td').on('click', function() {
        let index = parseInt($(this).attr('data-index'));
        let col = columns[index];
        let content = $(this).text();
        console.log(col + ": " + content);
    });

    table {
    border-collapse: collapse;
    }
    th {
      border: solid 1px #d4d4d4;
      border-bottom-width: 2px;
      padding: 5px 10px
    }


    td {
      border: solid 1px #d4d4d4;
      padding: 5px 10px
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table id="table">
      <thead>
        <th>ID</th>
        <th>Name</th>
      </thead>
      <tbody>
        <tr>
          <td data-index='0'>101</td>
          <td data-index='1'>Jackie</td>
        </tr>
        <tr>
          <td data-index='0'>102</td>
          <td data-index='1'>Thomas</td>
        </tr>
      </tbody>
    </table>