0

I'm trying to highlight an entire table row that has the material design lite look. I'm using check boxes to highlight the row and it works fine without the MDL look but as soon as I dress up a check box with MDL, it only highlights the current table cell where the check box is in and not the entire row.

Have a look at this as an example: http://jsbin.com/cuvifocoju/edit?html,output

Am I doing something wrong or it is a MDL bug? Thank you

SS113
  • 548
  • 1
  • 11
  • 21

1 Answers1

1

The checkbox in row 2 is directly in the table cell, and the checkbox in row 1 is not, it is with in the label tag. So you need to travel a bit higher up from the item to get the row.

So to fix your code as is to work with MDL thing

function toggleHighlight(currentCheck)
{
  var isChecked = currentCheck.checked;

  if(isChecked)
  {
      currentCheck.parentNode.parentNode.parentNode.style.backgroundColor="yellow";
  }
  else
  {
    currentCheck.parentNode.parentNode.parentNode.style.backgroundColor="";
  }
}

Not the nices fix but that will give you an idea.

Coenie Richards
  • 568
  • 12
  • 28
  • Of course! I forgot about the label tag making it one level deeper! Thank you so much for the explanation! – SS113 Nov 10 '15 at 23:00