javascript - 使用 Material Design Lite 复选框突出显示整个表格行

Question

我试图突出显示具有 Material 设计精简外观的整个表格行。我使用复选框来突出显示该行，在没有 MDL 外观的情况下它工作得很好，但是一旦我用 MDL 装饰复选框，它只会突出显示该复选框所在的当前表格单元格，而不是整个行。

看看这个例子:http://jsbin.com/cuvifocoju/edit?html,output

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

Answer 1

第 2 行中的复选框直接位于表格单元格中，而第 1 行中的复选框则不是，它位于 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="";
  }
}

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