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

3 篇文章 0 订阅

最近要用到在一个表格列表中显示每一个人的个人信息时想要在下方显示的方法,但是由于是要显示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标签的情况


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值