2 quicksilvery quicksilvery 于 2016.02.14 17:08 提问

jQuery 对<td>中的内容的控制

假设我有这样一条字符串对象

 var a={
    name: "zhang",
    age: "50,
    address: "Rd",
    }
我以这样的方式根据以上动态建立了一个table
 var $table=$("<table>");

    $table.append("<tr><td>"+a.name+"<br/>"+a.age+"<br/>"+a.address+"</td></tr>");

在这个td中,我同时写入了a的三个属性,用折行隔开。

问题:
假如我想让td 初始显示name,隐藏age和address
当鼠标移到这个td上的时候,隐藏name,显示age和address
鼠标移开后,显示name,隐藏age和address

如何实现?

1个回答

showbo
showbo   Ds   Rxr 2016.02.14 17:51
已采纳

用容器括起你的内容,操作容器,而不是文本节点

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script> 
$(function(){

var a={
    name: "zhang",
    age: "50",
    address: "Rd",
    }


 var $table=$("<table>");

    $table.append("<tr><td><div>"+a.name+"</div><div style='display:none'>"+a.age+"<br/>"+a.address+"</div></td></tr>");
$table.appendTo(document.body);

$table.find('td').mouseenter(function(){$('div:first',this).hide();$('div:last',this).show()}).mouseleave(function(){$('div:first',this).show();$('div:last',this).hide()});

})
</script>

quicksilvery
quicksilvery 回复无聊码农: 好的,谢谢!结帐!
接近 2 年之前 回复
showbo
showbo 回复quicksilvery: 用:eq选择器
接近 2 年之前 回复
showbo
showbo 回复quicksilvery: div:eq(1)
接近 2 年之前 回复
quicksilvery
quicksilvery 假设有三个div,第一个是 div:first,那么第三个是div:last吗? 第二个又是啥?
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!