CODEWITHSUNDEEP
javascripthtmlmaterial-design-lite
SS113
SS113

Reputation: 548

Highlighting entire table row with Material Design Lite checkbox

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

Upvotes: 0

Views: 572

Answers (1)

Coenie Richards
Coenie Richards

Reputation: 568

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.

Upvotes: 1

Related Questions