您的位置:首页 > Web前端 > JQuery

使用Dom以及JQuery两者的转换达成无Id的标签的内容获取

2014-11-14 01:03 549 查看
最近要用到在一个表格列表中显示每一个人的个人信息时想要在下方显示的方法,但是由于是要显示td中的内容,

而且是表格中具备多个tr(用<s:iterator value="listuser" var="userInfo">做的),所以会不能用Id来查找,在网上找了好久都没办法,

最后只好自己想,费了好长时间终于弄出来了。。。

本段代码实现了当鼠标在一段个人信息上方移动时,

下方有一个div会显示他的内容

html代码:

<tr onclick="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;"

onmouseover=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标签的情况
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐