通过hover控制表格td内容的显示和隐藏

Question

这儿我建立了5个父div，id分别是
box0 box1 box2 box3 box4

和5个子div ， id分别是
personalInfo0 personalInfo1 personalInfo2 personalInfo3 personalInfo4

当我的鼠标移动到box0的时候，我想显示personalInfo0，但不想显示其他的personalInfo。
以此类推，当鼠标移动到boxn的时候，就显示personalInfon。
请问该如何实现...?

下面是我建立表格的关键语句。

for(var i=0;i<len;i++){
    var tempStr="";
 tempStr+="<tr><td>"+tempDaTa[i].id+"</td><td>"+tempDaTa[i].content+"</td><td><div id='box"+i+"'>"+tempDaTa[i].nickname+"<br/>"
                    +"<div id='personalInfo"+i+"' style='display:none'>"+tempDaTa[i].camper+"-"+tempDaTa[i].major+"-"+tempDaTa[i].grade+"</div></div></td></tr>";
        $tbody.append(tempStr); 
        }

Answer 1

jquery代码：

$("div[id^='box']").each(function(index,domEle){
    var _index=index;
    $(this).mouseenter(function(){
        $('#personalInfo'+_index).show();
    });
    $(this).mouseleave(function(){
        $('#personalInfo'+_index).hide();
    })
})