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

Question

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

 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

如何实现？

Answer 1

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

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