使用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标签的情况
而且是表格中具备多个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标签的情况
相关文章推荐
- JAVAWEB开发之Session的追踪创建和销毁、JSP详解(指令,标签,内置对象,动作即转发和包含)、JavaBean及内省技术以及EL表达式获取内容的使用
- 使用Jquery获取带特殊符号的ID 标签的方法
- jquery模糊获取标签动态id值及内容
- 使用Jquery 如何获取带特殊符号的ID 标签
- 如何利用jquery获取下拉框中所选的内容以及select里value的使用
- jquery通过id或name获取标签的值,以及简单的js正则表达式
- jquery 通过相同id获取多个dom标签
- jquery 学习(四) 获取标签中的值||text()与html的区别,以及jquery对象与dom对象的转换
- jquery通过id或name获取标签的值,以及简单的js正则表达式(笔记)
- 使用Jquery获取带特殊符号的ID 标签的方法
- 使用jquery获取url以及jquery获取url参数的方法
- 关于jQuery通过ID获取元素时在IE7与IE其他版本以及其他浏览器的区别
- 转载:jquery如何来获取label标签里的内容 checkbox选中后获取label标签内容
- Android中 Bitmap Drawable Paint的获取、转换以及使用
- 使用jquery获取url以及jquery获取url参数的方法
- 沫沫金:实践使用的jQuery获取框架内容的方法
- Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID,反之也行!
- 使用jquery,按id复制节点,并更改该节点id,以及更改该节点下的已知节点id
- Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID,反之也行!
- json数据解析与JAVA对象转换以及在JQUERY中的使用