CODEWITHSUNDEEP
javascriptjqueryhtmlfunction
Henry
Henry

Reputation: 1042

How to highlight selected/clicked cell of a table HTML5

I am working on a simple project to learn web development and I would like to add a feature in my project that highlights the clicked cell to a specific colour. Please have a look at this link: https://jsfiddle.net/pz6tc3ae/30/

What this project does is, when any cell from table 1 is clicked it triggers table 2, however, currently there is no way of knowing which table cell triggered table 2, so I am thinking of adding a feature that highlights the clicked cell, however, when the user clicks away from the highlighted cell, the cell should change colour to the one it was in before being highlighted, and not to the default colour.

Please note, try the link above in chrome, some features does not work other browsers.

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>

If my question was not clear, please let me know and I will try explaining it better :)

Upvotes: 0

Views: 1688

Answers (1)

Ajay Makwana
Ajay Makwana

Reputation: 2372

try this: https://jsfiddle.net/pz6tc3ae/35/

just add to javascript:

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

and to CSS:

.green{background:green;}

This is the demo with jquery: https://jsfiddle.net/pz6tc3ae/37/

Upvotes: 2

Related Questions