Question

我正在开发一个简单的项目来学习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>

如果我的问题不明确，请告诉我，我会尝试更好地解释：）

Answer 1

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

只需添加到javascript：

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

和CSS：

.green{background:green;}

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

如何突出显示HTML5

1 个答案: