如何从html表中仅获取一列值？

Question

I have a html table that shows a list of users ID, Name and E-mail. When my user clicks in any row, I get the id number of that row and send to my backend. So, I did this:

//Making the table
var trs = document.getElementsByTagName('tr');

for (var i = 0; i < trs.length; i++) {
  trs[i].onclick = clickHandler;   
}

Function that handles the click:

function clickHandler(event) {
  var numb = this.innerText.match(/\d/g);
  numb = numb.join("");
  window.location.replace("chooseParticipant.php?id="+numb);  
}

Table Example:

<div id="table">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <td>7</td>
            <td>Test User</td>
            <td>testuser123@example.com</td>
        </tbody>
    </table>
</div>

What happens then? If an user have numbers in their e-mail, the "numb" variable gets these numbers too. I don't know how to filter only the id number. Did someone have any ideas?

Answer 1

You could assign a class to you tag. Something like below:-

    <td class="id">7</td>

And in the javascript code you could fetch all the elements with class "id". And then perform your click handler on each one.

    var trs = document.getElementsByClassName('id');

I hope this helps.

Answer 2

Try this code snippet which use data-* attribute

 document.addEventListener('DOMContentLoaded', function(e) { var trs = document.querySelectorAll('#table tbody tr'); var repeater = Array.prototype.slice; repeater.call(trs).forEach(function(tr) { tr.addEventListener('click', function(e) { var data = tr.querySelector('td[data-id]').dataset; console.log('id=', data.id); }); }); }); 

 tbody { cursor: pointer; } 

 <div id="table"> <table border="1" cellspacing="0" cellpadding="3"> <thead> <tr> <th>ID</th> <th>Name</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td data-id="7">7</td> <td>Test User 1</td> <td>testuser1231@gmail.com</td> </tr> <tr> <td data-id="8">8</td> <td>Test User 2</td> <td>testuser1232@gmail.com</td> </tr> <tr> <td data-id="9">9</td> <td>Test User 3</td> <td>testuser1233@gmail.com</td> </tr> </tbody> </table> </div>