使用 Material Design Lite 复选框突出显示整个 table 行

Question

我试图突出具有 material 精简设计外观的整个 table 行。我正在使用复选框来突出显示该行并且它在没有 MDL 外观的情况下工作正常但是一旦我用 MDL 装扮一个复选框，它只会突出显示复选框所在的当前 table 单元格整行。

以这个为例：http://jsbin.com/cuvifocoju/edit?html,output

我是做错了什么还是 MDL 错误？谢谢

Answer 1

第2行的checkbox直接在table单元格中，而第1行的checkbox则不是，是with在label标签中。因此，您需要从项目向上移动一点才能获得该行。

所以要修复您的代码以使用 MDL 东西

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

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

不是很好的修复，但它会给你一个想法。

使用 Material Design Lite 复选框突出显示整个 table 行

Highlighting entire table row with Material Design Lite checkbox

html

javascript

material-design-lite