Question

好的，我有一个大的html表（超过120行）和一个搜索栏。问题是这些行中没有按钮，我希望用户能够选择它们。我从互联网数据库中获取了这些数据。我不想要通过120行html表格，每个表格中都放一个按钮（我也只使用原始表格中有3000多行的部分，所以通过所有这些都不是一个选项）。无论如何，如何让用户能够选择单元格/行并获取其值而无需更改html中的原始表格？

Answer 1

你总是可以在td / tr上放一个click事件，并做任何你想要的函数调用

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处理程序并在其中执行某些操作（例如，更改其背景颜色，打印消息或任何您想要的内容））

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

2 个答案: