日期:2014-05-16 浏览次数:20344 次
这也是在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);&