最近要用到在一个表格列表中显示每一个人的个人信息时想要在下方显示的方法,但是由于是要显示td中的内容,
而且是表格中具备多个tr(用<s:iterator value="listuser" var="userInfo">做的),所以会不能用Id来查找,在网上找了好久都没办法,
最后只好自己想,费了好长时间终于弄出来了。。。
本段代码实现了当鼠标在一段个人信息上方移动时,
下方有一个div会显示他的内容
html代码:
<tr οnclick="getIndex(<s:property value="#userInfo.id" />)"
class="userInfo<s:property value="#userInfo.id" />">
<td><s:property value="#userInfo.id" />
</td>
<td><s:property value="#userInfo.username" />
</td>
<td><s:property value="#userInfo.sex" />
</td>
<td><s:property value="#userInfo.age" />
</td>
<td style="overflow:hidden;"
οnmοuseοver=show(this)><s:property
value="#userInfo.information" />
</td>
<!--这部分实现的是一个对象的相应的个人信息显示,this在JQuery中起作用-->
<td><a
href="Users_GoUpdateUser.action?index=<s:property value="#userInfo.id" />">更新</a>
</td>
<td><font style="color: red;cursor:pointer;" class="reverse">删除</font>
</td>
</tr>
JS部分:
function show(obj) {
var str = getIE(obj);
var temp = str.split(",");
var top = temp[0];
var left = temp[1];
var objDiv = document.getElementById("div1");
objDiv.style.display = "";
objDiv.style.left = temp[1];
objDiv.style.top = parseInt(temp[0]) + parseInt(obj.offsetHeight);
var $objo = $(obj);//JQuery获取对象
var objDom1 = $objo[0];//转换为Dom操作
objDiv.innerHTML =objDom1.innerHTML;
}
function getIE(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
while (e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}
return (t + "," + l);
}
function hide(obj) {
obj.style.display="none";
}
本段JS代码实现的是图片中的内容,
紫色字体实现的是通过在Dom和JQuery间的转换完成无须具备Id即可显示其内部的内容,
适用于类似上面包含多组tr、td标签的情况