单击td中的img时更改tr背景颜色

well i am filling a table with php with values from DB

好吧,我正在填充一个表与PHP的值与DB的值

what i was trying to but unsuccessful didnt is to change the tr background color when image is clicked

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

here is what i tried to do

这是我试图做的

<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>

obiously this is just for one case but when i get elements from DB this table is pretty long
any ideas?

很明显,这仅仅是针对一个案例,但是当我从数据库中获取元素时,这个表格的任何想法都很长?

THANKS IN ADVANCE

提前致谢

one more thing

还有一件事

my table already has an css design where

我的桌子已经有了css设计

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

this is maybe why when doing onclick="this.parentNode.parentNode.style.background='gray'"

这可能是为什么当做onclick =“this.parentNode.parentNode.style.background ='gray'”时

is not working how can i fix this?

不工作怎么解决这个问题?

2 个解决方案

#1

You could simply use parentNode : DEMO

你可以简单地使用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

img-> parentNode = td - > parentNode = tr

#2

jQuery code

//code for clicks
$('td img').click(function() {
  $(this).closest('table').children('tr').removeClass('highlight');
  $(this).closest('tr').addClass('highlight');
});

//code for hovering
$('tr').hover(function() {
  //if the tr has the highlight class do nothing, otherwise add hover style
  if(!$(this).hasClass('highlight')) {
    $(this).addClass('hoverStyle');
  } 
}, function() {
  //if the tr has hover style remove it when hover ends
  if($(this).hasClass('hoverStyle')) {
    $(this).removeClass('hoverStyle');
  }
});

Then just make a CSS class to define the highlight style.

然后只需创建一个CSS类来定义高亮样式。

#1