在html表格的每一行上添加点击功能

Question

我最近创建了一个函数，它根据用户对网站的输入进行一些复杂的名称匹配，并将结果以表格格式的 html 文件形式返回。我的问题是如何在每一行上添加点击功能？

df = get_cust_info()  # returns a pandas dataframe
df.to_html('results.html')  #converts the dataframe to html

想法是用户输入他的名字，（如果他拼错了，程序会建议以下名称。因此以 html 格式返回一个表格。

现在我想在每一行上添加点击功能。希望点击请求我在内部拥有的数据库并返回正确的信息。它必须是动态的。我的意思是如果返回一行，您只能单击一行。如果返回 10 行，您应该能够单击任何行。谢谢

编辑：根据下面的答案，我添加了以下几行，但仍然无法点击该行。不知道我做错了什么。

一个示例 html 文件

    <table border="1" class="dataframe">
     <thead>
     <tr style="text-align: right;"><th></th>
     <th>CustomerName</th>
     <th>firstName</th>
    <th>MiddleName</th>
    <th>LastName</th>
    <th>Address</th>
    <th>zip</th>
    <th>State</th>
    <th>score_first</th>
    <th>score_second</th>
    <th>score_third</th>
    </tr>
   </thead>
   <tbody>
<tr>
  <th>5046</th>
  <td>JAMES G STAHL</td>
  <td>JAMES</td>
  <td>G</td>
  <td>STAHL</td>
  <td>4090 BECK RD</td>
  <td>44256</td>
  <td>OH</td>
  <td>0.97</td>
  <td>1.0</td>
  <td>0.91</td>

<tr>
  <th>5050</th>
  <td>JONATHAN STAHL</td>
  <td>JONATHAN</td>
  <td>None</td>
  <td>STAHL</td>
  <td>4114 BECK RD</td>
  <td>44256</td>
  <td>OH</td>
  <td>0.57</td>
  <td>NaN</td>
  <td>0.91</td>
</tr>
   </tbody>
   </table>

编辑 2：在进一步搜索另一个 stackoverflow 问题后，我尝试将其添加到底部。

 <script>
document.querySelector(".dataframe").addEventListener("click", function(e) {
var row = e.target;
while (row.matches && !row.matches("tr")) {
    row = row.parentNode;
}
if (row.matches && row.matches("tr") { 
    alert(row.innerHTML);
}
});
</script>

还是不行。对不起，我是 javascript/jquery 的新手。如果有人可以提供帮助，那将是一个巨大的帮助

Answer 1

通过执行以下操作，我设法使这些行可点击：我希望它对社区有所帮助，因为我在这里找到的一些答案没有帮助。

<script>
function addRowHandlers() {
var table = document.querySelector(".dataframe");
var rows = table.getElementsByTagName("tr");
for (i = 1; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler = 
        function(row) 
        {
            return function() { 
                                    var cell = row.getElementsByTagName("td")[0];
                                    var id = cell.innerHTML;
                                    alert("id:" + id);
                             };
        };

    currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();
</script>

Answer 2

答案是在 JavaScript 中使用event.target。您可以将事件侦听器添加到表本身，然后在事件侦听器中检测在其中实际单击了哪个元素。像这样的东西应该可以工作：

document.querySelector(".dataframe").addEventListener("click", function(e) {
    var row = e.target;
    while (row.matches && !row.matches("tr")) {
        row = row.parentNode;
    }
    if (row.matches && row.matches("tr") { // check for row.matches because at the very top of the document tree row.matches will be undefined but row itself will be non-null
        // This is the table row element you're looking for
    }
});