如何在不使用按钮的情况下在html表中选择一行？

Question

好吧，我有一个大的HTML表格（超过120行）和一个搜索栏。问题是这些行没有按钮，我希望用户能够选择它们。我从互联网数据库中获得这些数据。我不想要通过120行的HTML表中放置一个按钮（也是我只与原来的表有超过3000行的一部分工作，所以通过它的所有它真的不是一个选项）。无论如何，我怎么能让用户能够选择一个单元格/行，并获得它的价值，而无需更改HTML中的原始表？

Answer 1

你总是可以把对TD/TR点击事件，做任何你想要的得到所谓

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>

Answer 2

如果你想“选择”单元格或功能一行不添加其他控件的表，你可以添加一个onclick处理程序并在其中执行某些操作（例如，更改其背景颜色，打印消息或任何你想要的）