在表格行鼠标悬停时显示提交按钮答案

【问题标题】：Show a submit button on table row mouseover在表格行鼠标悬停时显示提交按钮
【发布时间】：2012-04-30 20:22:26
【问题描述】：

首先，请原谅我是 Javascript 和 PHP 的初学者。

第二：我有一个包含一些订单信息的表格，每行的第一个单元格包含一个提交按钮，该按钮会将信息从该行发送到将显示它的第二页。

我编写了一个小的 Javascript 函数，以便隐藏提交按钮，直到有人将鼠标悬停在它们上方。但我的问题是按钮的提交 ID 分配给了第一个按钮，所以无论我将鼠标悬停在哪一行，都只会显示第一个提交按钮。

显示功能如下：

    function showButton(id) 
    {
        var e = document.getElementById(id);
        if(e.style.display == 'block')
           e.style.display = 'none';
        else
           e.style.display = 'block';
    }

该行定义为：

    tr onmouseover='showButton("submitButton");'
                   onmouseout='showButton("submitButton");'>

在新行的每次迭代中生成的按钮是：

    input type='submit' id='submitButton' value='Submit' 
                   style='cursor: pointer; display: none;' />

任何帮助将不胜感激。我希望鼠标悬停时每一行旁边都显示正确的提交按钮。

【问题讨论】：

标签： php javascript html

【解决方案1】：

这可以通过 CSS 轻松实现，如下所示：

tr input { display: none; }
tr:hover input { display: inline; }

【讨论】：

IE 不处理 :hover 除了锚点之外的任何东西，如果我没记错的话。他这样做的方式是跨浏览器支持的更优选方式。
@DanRedux，我认为IE7+支持（严格模式）
非常感谢。我会努力回来的。
@DanRedux 为什么？我想决定 display 与 visibility 真的取决于其他因素（表格的样式，与<input> 一起在同一单元格中的其他内容等）。并且 OP 已经在他的代码中使用了display。至于 IE6，我相信今天的标准行为正在放弃对它的支持（甚至微软也不再支持它了！）。如果客户需要，我强烈建议为编码噩梦收取额外费用！ :)
完美运行。不需要 IE6 支持。如果是的话，我已经在使用 :hover 来做其他事情了，所以这就是窗外。