quicksilvery
2016-02-24 03:53
采纳率: 85.7%
浏览 2.7k
已采纳

通过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); 
        }
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • qq_19891827 2016-02-24 04:06
    已采纳

    jquery代码:

    $("div[id^='box']").each(function(index,domEle){
        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();
        })
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题