最近要用到在一個表格列表中顯示每一個人的個人信息時想要在下方顯示的方法,但是由於是要顯示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標籤的情況