Show/Hide div when hoovering its "parent" tablerow

I am trying to add functionality to my items in my RadComboBox similar to the youtube comments. When you hoover a comment, you see a set of button appearing. This is a cool feature and I am trying to achieve something similar. I am working with asp.net and C#.

I don't want to use Jquery, just standard JS.

HTML:

<ItemTemplate>
        <table width="100%">
            <tr onmouseover="ShowContent('buttonDiv'); return true;" onmouseout="HideContent('buttonDiv'); return true;" id="parentrow">
                <td style="width:45px;"><asp:Image runat="server" ID="img_Avatar" /></td>
                <td style="width:280px;"><asp:Literal runat="server" ID="lbl_literal"></asp:Literal></td>
                <td style="width:80px;"><div id="buttonDiv" style="display:none;">
                        <asp:Button ID="requestFriend" runat="server" Text="Fr" />
                        <asp:Button ID="groupInvite" runat="server" Text="Gr" />
         开发者_如何学C           </div>
                </td>
            </tr>
            <tr>
                <td colspan="3" style="height:1px; border-bottom:1px solid #d2d2d2;"></td>
            </tr>
        </table>
    </ItemTemplate>

JavaScript:

<script type="text/javascript" language="JavaScript">
var cX = 0;
var cY = 0;
var rX = 0;
var rY = 0;

function UpdateCursorPosition(e) {
    cX = e.pageX;
    cY = e.pageY;
}

function UpdateCursorPositionDocAll(e) {
    cX = event.clientX;
    cY = event.clientY;
}
if (document.all) {
    document.onmousemove = UpdateCursorPositionDocAll;
}
else {
    document.onmousemove = UpdateCursorPosition;
}

function AssignPosition(d) {
    if (self.pageYOffset) {
        rX = self.pageXOffset;
        rY = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop) {
        rX = document.documentElement.scrollLeft;
        rY = document.documentElement.scrollTop;
    }
    else if (document.body) {
        rX = document.body.scrollLeft;
        rY = document.body.scrollTop;
    }
    if (document.all) {
        cX += rX;
        cY += rY;
    }
    d.style.left = (cX + 10) + "px";
    d.style.top = (cY + 10) + "px";
}

function HideContent(d) {
    if (d.length < 1) {
        return;
    }
    document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
    if (d.length < 1) {
        return;
    }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    dd.style.display = "block";
}

function ReverseContentDisplay(d) {
    if (d.length < 1) {
        return;
    }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    if (dd.style.display == "none") {
        dd.style.display = "block";
    }
    else {
        dd.style.display = "none";
    }
}
</script>

As I am populating my combobox, the IDs are different for each row. So what ever row I hoover its always the first item that shows its button. How can I make sure I get the ID of the correct div to show? I know it probably has something todo with ClientID but my JS knowledge is very very simple.

I'm not sure I quite understand your question, but I'll take a shot at it:

You dont always have to pass the object with "getElementById". What you can do is for every row in the table, attach an "onmouseover" and "onmouseout" event programmatically. it would look something like this based on your current structure:

window.onload = function () {
   var rows = document.getElementsByTagName('tr');
   for (i in rows){ 
      if (rows[i].nodeType == 1){
          var thisRow =rows[i];
          thisRow.addEventListener("mouseover",ShowContent(thisRow.lastChild.firstChild),false);
          thisRow.addEventListener("mouseout",HideContent(thisRow.lastChild.firstChild),false);
      }
   }
}