如何突出显示表格HTML5的选定/单击单元格

How to highlight selected/clicked cell of a table HTML5

本文关键字：单击 单元格 何突出 显示 表格 HTML5      更新时间：2023-09-26

我正在做一个简单的项目来学习Web开发，我想在我的项目中添加一个功能，将点击的单元格突出显示为特定颜色。请查看此链接： https://jsfiddle.net/pz6tc3ae/30/

该项目所做的是，当单击表 1 中的任何单元格时，它会触发表 2，但是，目前无法知道哪个表单元格触发了表 2，所以我正在考虑添加一个突出显示单击的单元格的功能，但是，当用户单击离开突出显示的单元格时，单元格应该将颜色更改为突出显示之前的颜色， 而不是默认颜色。

请注意，在chrome中尝试上面的链接，某些功能在其他浏览器中不起作用。

.HTML 

<title>Untitled Document</title>
<body>
<table width="300" border="1" id="table1">
  <tbody>
    <tr>
      <td id="cell1"> On-Menu</td>
      <td id="cell2"> On-Menu</td>
      <td id="cell3"> On-Menu</td>
      <td id="cell4"> On-Menu</td>
    </tr>
    <tr>
      <td id="cell5"> On-Menu</td>
      <td id="cell6"> On-Menu</td>
      <td id="cell7"> On-Menu</td>
      <td id="cell8"> On-Menu</td>
    </tr>
    <tr>
      <td id="cell9"> On-Menu</td>
      <td id="cell10"> On-Menu</td>
      <td id="cell11"> On-Menu</td>
      <td id="cell12"> On-Menu</td>
    </tr>
  </tbody>
</table>
<table width="300" border="1" id="menulist">
  <tbody>
    <tr>
      <td id="cellorange"> Orange</td>
    </tr>
    <tr>
      <td id="cellapple"> Apple</td>
    </tr>
    <tr>
      <td id="cellbanana"> Banana</td>
    </tr>
  </tbody>
</table>
</body>

如果我的问题不清楚，请告诉我，我会尝试更好地解释它:)

试试这个：https://jsfiddle.net/pz6tc3ae/35/

只需添加到 JavaScript：

actionCell.className = (actionCell.className === "green") ? "none" : "green";

和 CSS ：

.green{background:green;}

这是使用 jquery 的演示：https://jsfiddle.net/pz6tc3ae/37/

相关文章：