-3

我正在尝试在 CSS、JavaScript 或 HTML 功能中实现，<tr>当位于表格行的表格数据<td>中的按钮悬停在上方时，该功能将更改表格行 () 的背景颜色。通过更改 CSS 文件，我可以轻松地通过为按钮分配 id 来更改按钮的背景颜色，但不知道从哪里开始更改表格行的背景。我在这个网站上查看了类似的解决方案，但它们不够具体（无论如何我都找到了）。任何帮助是极大的赞赏。

4

5 回答 5

3

jQuery：

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

您真的应该花一些时间阅读jQuery 文档。

于 2013-03-14T02:13:44.637 回答
2

首先，您必须在 JavaScript 中获得对表格中所有按钮的引用（如果您为所有按钮提供相同的名称（并且没有其他元素），或者如果您给所有按钮提供相同的名称，您document.getElementsByTagName可以获得所有按钮按钮的同一类（没有其他元素）。getElementsByNamegetElementsByClassName

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

于 2013-03-14T02:41:29.240 回答
0

我假设您也希望在离开该行时删除突出显示。在这种情况下，如果您选择 jQuery，您也需要删除该样式，而只需执行一个操作即可将悬停和悬停

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

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

.active {
  background-color: pink;
}

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

顺便说一句，如果您还没有使用 jQuery，我同意非 jquery 解决方案（例如 Scott 的解决方案）是可行的方法。

于 2013-03-14T03:37:10.330 回答
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/

于 2013-03-14T02:54:30.420 回答
0

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

http://jsfiddle.net/x2pLV/

table {
    width: 100%;
}

tr:hover {
    background: orange;
}

<table>
    <tr>
        <td><input type="submit" /></td>
    </tr>
</table>
于 2013-03-14T02:20:22.800 回答