Question

First of all, forgive me for being a beginner to Javascript and PHP.

Second:
I have a table with some order information, and the first cell of every row consists of a submit button that will send the information from that row to a second page where it will be displayed.

I wrote a small Javascript function so that the submit buttons are hidden until someone mouses over them. But my problem is that the submit ID for the buttons is assigned to the first button, so no matter what row I mouse over, only the first submit button displays.

The display function is the following:

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

The row is defined as:

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

And the button which is generated on every iteration of a new row is:

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

Any help would be greatly appreciated. I want the correct submit button appearing next to each row on mouseover.

Answer 1

That can be easily accomplished with just CSS, like this:

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