将鼠标悬停在<td>内的按钮上时如何更改<tr>的背景颜色？

5 回答

• 2

  您是否尝试更改 tr 的悬停样式？

  http://jsfiddle.net/x2pLV/

  table {
      width: 100%;
  }
  
  tr:hover {
      background: orange;
  }
  
  <table>
      <tr>
          <td><input type="submit" /></td>
      </tr>
  </table>
  

  回复于 2024-04-25T22:34:50+08:00
• 3

  jQuery的：

  $('table button').hover(function() {
      $(this).closest('tr').css('background-color', 'red');
  });
  

  你真的应该花点时间阅读jQuery docs .

  回复于 2024-04-25T22:34:50+08:00
• 0

  首先，你必须在JavaScript中获得表中所有按钮的引用（你可以获得 document.getElementsByTagName 获取所有按钮， getElementsByName 如果你给所有按钮命名相同（没有其他元素），或 getElementsByClassName 如果你给所有的按钮都是同一个类（没有其他元素） .

  // get all of the buttons in the table (I gave them all a class of tablebutton
  var buttons = document.getElementsByClassName("tablebutton");
  

  接下来，您必须循环按钮数组并添加两个事件侦听器，一个用于 mouseover （悬停）事件，另一个用于 mouseout （悬停）事件 .

  for (var i = 0; i < buttons.length; i++) {
      var button = buttons[i];
      button.addEventListener("mouseover", highlightRow, false);
      button.addEventListener("mouseout", unHighlightRow, false);
  }
  

  在这些事件侦听器中，您必须遍历DOM树，从按钮到表行，然后将行的背景颜色设置为突出显示的颜色或“”以删除颜色 .

  function highlightRow ()
  {
      var row = this.parentNode.parentNode;
      row.style.backgroundColor = "red";
  }
  
  function unHighlightRow ()
  {
      var row = this.parentNode.parentNode;
      row.style.backgroundColor = "";
  }
  

  （您也可以使用匿名函数，而不是使用名称定义函数...

  button.addEventListener("mouseover", function () {
          ...your code here
      }, false);
      button.addEventListener("mouseout", function () {
          ...your code here
      }, false);
  

  JSFiddle

  回复于 2024-04-25T22:34:50+08:00
• 0

  我假设您在离开行时也希望删除突出显示 . 在这种情况下，如果你选择jQuery，你也需要删除那个样式，而只需要一个动作来悬停和悬停

  $("td.data").hover(
    function () {
      $(this).parent("tr").toggleClass("active");
   }
  

  并在您的CSS中为该类添加样式：

  .active {
    background-color: pink;
  }
  

  你需要调整选择器以匹配你想要触发更改的单元格或元素但我看不到标记因此无法准确提供 - 上面的选择器在数据单元格上有类数据 .

  顺便说一下，如果你还没有使用jQuery，我同意像Scott这样的非jquery解决方案 .

  回复于 2024-04-25T22:34:50+08:00
• 0

  我喜欢没有jQuery的想法，这里有一个小提琴：

  var allButtons = document.getElementsByTagName('button'); 
  for(var i=0; i < allButtons.length; ++i) { 
      if(allButtons[i].getAttribute('class') == "hoverme") { 
          allButtons[i].onmouseover = function() { makerow(this, 'blue'); };
          allButtons[i].onmouseout = function() { makerow(this, 'yellow'); };
      }
  }
  
  function makerow(elem, color) { 
      elem.parentNode.parentNode.style.backgroundColor = color; 
  }
  

  代码在某种程度上取决于表的结构，因此请参见附件，例如：http://jsfiddle.net/JFd5T/

  回复于 2024-04-25T22:34:50+08:00