这也是在mvc中做的一个小实例（以表格的形式输出数据库的内容 在鼠标移到区域上会显示详细的关于这个的信息以div的形式在右边显示）

showDetail.tpl文件源码

<table align="center" >
<tr>
<th>显示详细信息</th>
</tr>
<{foreach from=$list item="value"}>
<tr style="background-color:#ccc">
<td id="name_<{$value.id}>"><{$value.id}></td>
<td onmouseover="showDetail(<{$value.id}>)" onmouseout="hideDetail(dd)"><{$value.username}></td>
</tr>
<{/foreach}>
</table>
<script>
    function showDetail(id){
        var xhr;
        if(window.ActiveXObject){
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }
        //换一种形式发送ajax请求post
        xhr.open("POST","index.php?c=user&a=process",true);
        xhr.onreadystatechange = callback;
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send('id='+id);
        function callback(){
            if(xhr.readyState ==4){
                if(xhr.status==200){
                    //alert(xhr.responseText);
                    var json = eval('('+xhr.responseText+')');
                    var new_div = document.createElement('div');
                    new_div.style.backgroundColor="#ccc";
                    new_div.innerHTML="id:"+json.id+"<br/>username:"+json.username+"<br/>password:"+json.password;
                    new_div.style.position='absolute';
                    new_div.style.marginLeft='70px';
                    new_div.id="new_div"+id;
                    document.getElementById('name_'+id).appendChild(new_div);
                }
            }
        }
    }
    
    function hideDetail(id){
    var new_div=document.getElementById("new_div"+id);
    document.getElementById("new_div"+id).removeChild(new_div);&