javascript - 单击 td 内的 img 时更改 tr 背景颜色

标签 javascript jquery html css

好吧,我正在用 PHP 用来自 DB 的值填充一个表

我尝试但未成功的不是在单击图像时更改 tr 背景颜色

这是我尝试做的

<script>
 function changeColor(tr)
 {
   var tableRow = document.getElementById(tr);
   tableRow.style.backgroundColor='red';
 }
</script>

<html>
      <table>
            <tr id='tr<?php echo $personID;?>'>
                  <td>
                      <?php echo $personName;?>
                  </td>
                  <td>
                      <?php echo $personLastName;?>
                  </td>
                  <td>
                      <img src= "/*an image*/" onmouseover="" style="cursor: pointer;" onclick="changeColor('tr<?php echo $personID;?>')" >
                  </td>
            </tr>
      </table>
</html>

很明显,这只是一种情况,但是当我从数据库中获取元素时,这张表很长
有什么想法吗?

提前致谢

还有一点

我的表已经有一个 css 设计,其中

td
{
 background: #EDEDED;
}
tr:hover
{ 
 background: #d0dafd;
}

这可能就是为什么执行 onclick="this.parentNode.parentNode.style.background='gray'"

不工作我该如何解决?

最佳答案

您可以简单地使用 parentNode : DEMO

  <img src="http://dummyimage.com/50x50"
       onmouseover="this.parentNode.parentNode.style.background='gray'" 
       onmouseout="this.parentNode.parentNode.style.background=''"
  />

img->parentNode=td -> parentNode=tr

关于javascript - 单击 td 内的 img 时更改 tr 背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23450999/

相关文章:

javascript - 从 HTML 代码中提取数据

javascript - 如何将此 javascript 日期选择器日期转换为毫秒?

javascript - 无法使用javascript在Firefox中获取鼠标滚轮滚动方向

css - 展开内容区

javascript - jQuery .hover() 代码未执行

php - 动态重写img src : get images from a different directory with a higher resolution

javascript - 为什么即使必填字段留空也会提交此表单?

javascript - 为什么 Typescript 不能推断可选参数的函数参数类型?

javascript - Vue动态添加不同组件

javascript - Bootstrap 3 Modal Event (Hidden.Bs.Modal) 不断重复