javascript - How to select a row in a html table without using a button? -

okay have large html table(over 120 rows) , search bar. problem these rows dont have buttons in them , want user able select them. got data internet database. dont want have go through 120 rows of html table putting button in each one(also im working section of original table has on 3000 rows, going through of not option). anyway how can make user able select cell/row , value without changing original table in html?

you can put have click event on td/tr , whatever want function called

var elements= document.getelementsbytagname('td');  for(var i=0; i<elements.length;i++)  {  (elements)[i].addeventlistener("click", function(){     alert(this.innerhtml);  });  }

td:hover{  background-color:gray;  cursor:pointer;  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    <table class="table table-bordered">      <thead>        <tr>          <th>firstname</th>          <th>lastname</th>          <th>email</th>        </tr>      </thead>      <tbody>        <tr>          <td>john</td>          <td>doe</td>          <td>john@example.com</td>        </tr>        <tr>          <td>mary</td>          <td>moe</td>          <td>mary@example.com</td>        </tr>        <tr>          <td>july</td>          <td>dooley</td>          <td>july@example.com</td>        </tr>      </tbody>    </table>