在html表的每一行上添加点击功能 [英] add click feature on each row in html table

问题描述

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

I recently created a function that does some complicated name matching based on user input into a website and returns the result as an html file in a table format. My question is how do I add click feature on each row?

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

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

Idea is user types his name, (if he misspells it, the program suggests following names. Hence a table is returned in html format.

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

Now I want to add click feature on each row. The click hopefully requeries the database that I have internally and returns the right information. It has to be dynamic. By this, I mean if one row is returned, you can click on only one row. if 10 rows are returned, you should be able to click on any row. Thank you

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

Based on the answer below, I added the following lines but am still having trouble getting the row to click. Not sure what im doing wrong.

示例 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 问题后，我尝试将其添加到底部.

Edit 2: Upon further search on another stackoverflow question, I tried adding this to the bottom.

 <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 的新手.如果有人可以提供帮助，那将是一个巨大的帮助

Still not working. Im sorry im new to javascript/jquery. If anyone can help that would be a huge help

推荐答案

答案是在 JavaScript 中使用 event.target.您可以向表本身添加一个事件侦听器，然后在事件侦听器内部检测实际单击了哪个元素.这样的事情应该可以工作:

The answer is to use event.target in JavaScript. You can add an event listener to the table itself and then inside the event listener detect which element was actually clicked inside it. Something like this should work:

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
    }
});

这篇关于在html表的每一行上添加点击功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！