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

如何实现?

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

 <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>