在表行鼠标悬停上显示提交按钮

时间:2012-04-30 20:22:26

标签: php javascript html

首先,请原谅我是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;' />

非常感谢任何帮助。我希望鼠标悬停时每行旁边都显示正确的提交按钮。

1 个答案:

答案 0 :(得分:3)

只需使用CSS即可轻松完成:

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