问题描述

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

这儿我建立了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);         }

解决方案

jquery代码：

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

解决方案二：

    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);    }    $('div[id^=""box""]').mouseover(function () {        $('div[id^=""personalInfo""]').hide().filter('#personalInfo' + this.id.replace('box' '')).show();    })