ボタンを使用せずにhtmlテーブルの行を選択する方法は？

Question

大丈夫なので、私は大きなhtmlテーブル（120行以上）と検索バーを持っています。問題は、これらの行にボタンが表示されず、ユーザーが選択できるようにすることです。私はこのデータをインターネットデータベースから入手しました。私はいないそれぞれのボタンを置くhtmlテーブルの120行（また、3000行以上を持っている元のテーブルのセクションで動作しているので、すべてを通過することは本当にオプションではない）を通過する必要はありません。とにかく、どのように私は、ユーザーがセル/行を選択し、HTMLの元のテーブルを変更せずにその価値を得ることができますか？

Answer 1

あなたは常にTR、TD /上のクリックイベントがあり、

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ハンドラを追加してその中で何かを行うことができます（たとえば、背景色を変更したり、メッセージを印刷したり、必要なものを印刷するなど）