add click feature on each row in html table

Question

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

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

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

Edit: 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.

A sample html file

    <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>

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>

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

You forgot parentheses in the `if(...)`. – Jus Jul 05 '21 at 13:27 — Jus, Jul 05 '21 at 13:27

score 2 · Answer 1 · answered Feb 23 '18 at 00:01

2

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

answered Feb 23 '18 at 00:01

Robert Moore

2,207
4
22
41

Thanks. Is there anyway to just use html,beautiful soup and python rather than JavaScript as I’m not familiar with that language – turtle_in_mind Feb 23 '18 at 00:17
By the way, I pasted your code in my html document at the very bottom but it didn’t render the table clickable – turtle_in_mind Feb 23 '18 at 16:56
anyway you could help? – turtle_in_mind Feb 23 '18 at 20:39
@rajn You replaced my comment inside the if statement with an alert box to test it? Add console.logs all over the place and tell me which ones are reached and which ones don't print at all; I can help. – Robert Moore Feb 23 '18 at 22:30
when you add // is that a comment inside the if statement? Im sorry im completely new to javascript – turtle_in_mind Feb 23 '18 at 22:35
Yes, the `//` makes a comment in JavaScript. – Robert Moore Feb 23 '18 at 22:35
Ok I replaced your code. How do i check for row.matches? – turtle_in_mind Feb 23 '18 at 22:38
No the comment above it is just explaining the weird and confusing if statement. Ignore it. Just put whatever code you want inside the if statement. Try this for starters: `alert(row.innerHTML)` – Robert Moore Feb 23 '18 at 22:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/165740/discussion-between-rajn-and-robert-moore). – turtle_in_mind Feb 23 '18 at 22:47
hey are u there? – turtle_in_mind Feb 23 '18 at 23:25
I tried placing the code you mentioned. But it still doesn't work – turtle_in_mind Feb 23 '18 at 23:47

score 0 · Answer 2 · answered Feb 24 '18 at 00:31

I managed to make the rows clickable by doing the following: I hope it helps the community as some of the answers I found here weren't helpful.

<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>

add click feature on each row in html table

2 Answers2

Linked