<script>
function showtab(){
obj = document.getElementsByTagName("table");
for(i=0;i<obj.length;i++){
if(obj[i].classid=='main'){
obj[i].style.display="inline"
}
}
}
function hidetab(){
obj = document.getElementsByTagName("table");
for(i=0;i<obj.length;i++){
if(obj[i].classid=='main'){
obj[i].style.display="none"
}
}    
}
function list(){
obj = event.srcElement;
if(obj.tagName=="TD" && obj.parentElement.parentElement.parentElement.classid=="list"){
t1.value=obj.parentElement.cells[1].innerText
}
if(obj.type=="button"){
showtab()
}
else{
hidetab()
}
}
function document.onmouseover(){
obj = event.srcElement;
if(obj.tagName=="TD" && obj.parentElement.parentElement.parentElement.classid=="list"){
obj.parentElement.style.background="#eeeeee";

}function document.onmouseout(){
obj = event.srcElement;
if(obj.tagName=="TD" && obj.parentElement.parentElement.parentElement.classid=="list"){
obj.parentElement.style.background="";

}
document.onclick = list
</script>
<input type="text" id="t1"><input type="button" value="↓选择"><br>
<table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="300" cellpadding="0" cellspacing="0" style="display:none" classid='main'>
<tr>
<td width="40" bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >序列</td>
<td width="100" bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >名称</td>
<td width="160" bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >内容</td>
</tr>
<tr>
<td colspan=3 valign="top">
<div style="overflow-y:scroll;background:red;height:200">
<table border=0 cellpadding=2 cellspacing=0 classid='list'>
<tr>
<td width="40">1</td>
<td width="100">无忧脚本1</td>
<td width="160">体验脚本快乐</td>
</tr>
<tr>
<td width="40">2</td>
<td width="100">无忧脚本2</td>
<td width="160">体验脚本快乐</td>
</tr>
<tr>
<td width="40">3</td>
<td width="100">无忧脚本3</td>
<td width="160">体验脚本快乐</td>
</tr>
</table>
</div>
</td>
</tr>
</table>以前写的,你可以看看,效果差不多