Javascript highlight onclick table cell

Question

<table>
 <tr>
  <td align="center" class="topmenu"><a href="../cases/showProject.asp?ID=<%=ID%>" onclick="if(gv_changeHaveBeenMade){return window.confirm('<%= TR("Page change but not saved. Continue?") %>')}"><img src="../Grafik/newMenuAnalyse.png" alt="" border="0"></a><a href="../cases/showProject.asp?ID=<%=ID%>" onclick="if(gv_changeHaveBeenMade){return window.confirm('<%= TR("Page change but not saved. Continue?") %>')}"><%= TR("Project data") %></a></td>
  <td align="center" class="topmenu" valign="middle"><a href="../cases/Sagskort.asp?ID=<%=ID%>" onclick="if(gv_changeHaveBeenMade){return window.confirm('<%= TR("Page change but not saved. Continue?") %>')}"><img src="../Grafik/newMenuProjects.png" alt="" border="0"></a><a href="../cases/Sagskort.asp?ID=<%=ID%>" onclick="if(gv_changeHaveBeenMade){return window.confirm('<%= TR("Page change but not saved. Continue?") %>')}"><%= TR("Project card") %></a></td>
    </tr>
</table>

I have this table with a single row and lot of <td> in it which contains a picture and some text that links to other pages that updates in a frame below the menu items i want to highlight.

Currently I am working with this piece of code but cannot get it to work properly.

function highlight_data() {
var table = document.getElementById('display-table');
var cells = table.getElementsByTagName('td');

for (var i = 0; i < cells.length; i++) {

    var cell = cells[i];

    cell.onclick = function () {

        var tdId = this.parentNode.cellIndex;

        var tdNotSelected = cells;
        for (var data = 0; data < tdNotSelected.length; data++) {
            tdNotSelected[data].style.backgroundColor = "";
            tdNotSelected[data].classList.remove('selected');
        }
        var tdSelected = cells[tdId];
        tdSelected.style.backgroundColor = "yellow";
        tdSelected.className += " selected";


    }
  }

} //end of function

window.onload = highlight_data;

somehow if I use rowIndex insted af cellIndex at this.parentNode.cellIndex it can highlight a single cell onclick bit i highlights the cell next to the one i click in the selected row in my test.

Bear in mind I would like this in pure JS if possible thanks.

Edit: Rayon's answer worked partly, I did not mention that it's a menu that updates a frame with the content the links link to, Rayon's answer highlight the cell until the frame is finished loading the new page and then the highlight disappears.

Create a snippet with HTML to show an example of your issue. Use the [<>] button in the editor — mplungjan, Aug 17 '16 at 09:12
Ok i did that now, not sure how i can format it since its old code and runs in asp.net — Madsj1, Aug 17 '16 at 09:24

Rayon · Answer 1 · 2016-08-17T09:19:44.857

3

Use [].forEach.call to iterate all the td elements and remove style
Use this in click-handler which will be nothing but element itself and set the style

function highlight_data() {
  var table = document.getElementById('display-table');
  var cells = table.getElementsByTagName('td');
  for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    cell.onclick = function() {
      [].forEach.call(cells, function(el) {
        el.style.backgroundColor = "";
      });
      this.style.backgroundColor = "yellow";
    }
  }
}

window.onload = highlight_data;

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<table id="display-table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

edited Aug 17 '16 at 09:19

answered Aug 17 '16 at 09:13

Rayon

36,219
4
49
76

I will try this, thank you! – Madsj1 Aug 17 '16 at 09:25
Okay your answer worked partly, since i forgot to mention it a table menu that updates a frame with the loaded content page. And your solution highlights the menu item until the frame is loaded. Any ideas? Thanks. – Madsj1 Aug 17 '16 at 09:41
@Madsj1 – Is it about page-reload ? – Rayon Aug 17 '16 at 09:42
No its basically a menu build in a table with a single row and all of the table cells which contains the html i put in the code snippet at the top. With your code it highlights the selected cell until the frame below the menu is done loading. Then the highlight disappears. – Madsj1 Aug 17 '16 at 09:45
@Madsj1 – Do share a fiddle of the same.... I am not getting you... – Rayon Aug 17 '16 at 09:46
sorry it is about page-reload. I am not sure if a fiddle would do any good, since its really old and shitty gode but i can take some pics and upload them to imgur so you can see how it works if that would help. here is an imgur album http://imgur.com/a/t2yAD pic 1 the pics in the top is the menu (those below the blue top line) everything below that is a frame that updates when a menu item is clicked. pic2 it highlights. pic3 highlight disappears on new frame load. – Madsj1 Aug 17 '16 at 09:55
im sorry if this is way to over complicated did not think of the page basically reloading when a new menu item was selected. – Madsj1 Aug 17 '16 at 09:56

Javascript highlight onclick table cell

1 Answers1