Question

我正在尝试在CSS，JavaScript或HTML功能中实现，当位于该表行的表数据{{1}内的按钮时，该功能将更改表行（<tr>）的背景颜色徘徊过来。通过更改CSS文件，我可以轻松地通过为按钮分配id来更改按钮的背景颜色，但不知道从哪里开始也可以更改表行的背景。我在这个网站上看过类似的解决方案，但它们不够具体（我发现的那些）。非常感谢任何帮助。

Answer 1

jQuery的：

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

你真的应该花些时间阅读jQuery docs。

Answer 2

首先，您必须使用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

Answer 3

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

http://jsfiddle.net/x2pLV/

table {
    width: 100%;
}

tr:hover {
    background: orange;
}

<table>
    <tr>
        <td><input type="submit" /></td>
    </tr>
</table>

Answer 4

我喜欢没有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/

Answer 5

我假设您在离开行时也希望删除突出显示。在这种情况下，如果您使用jQuery，您还需要删除该样式，而只需将鼠标悬停在一起并悬停

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

并在css中添加该类的样式：

.active {
  background-color: pink;
}

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

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

如何更改悬停在按钮内的背景颜色？

5 个答案: