读书人

Jquery与GridView结合使用的有关问题

发布时间: 2012-05-27 05:42:30 作者: rapoo

Jquery与GridView结合使用的问题
主要想实现的功能是GridView绑定数据,然后鼠标经过GridView的行,显示一个Div,其中有每一行的详细数据(有图片,并且图片是使用ashx文件处理的。)我要如何才能实现这样的功能?

<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#bookinfor").hide();//隐藏div

$(".BookListGridView").hover(
function () {
$("#bookinfor").show();//div显示
$("#bookpic").attr("src", "ashx的文件地址?");
$("#bookxx").text("详细的文字说明");
},
function () {
$("#bookinfor").hide();
}
);
});
</script>

[解决办法]

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head runat="server">        <title></title>        <script type="text/javascript" src="js/Jquery/jquery-1.5.1.js">        </script>    </head>    <body>        <div id="bookinfor">            <div>                <img id="bookpic" alt="" />            </div>            <div id="bookxx">            </div>        </div>        <form id="form1" runat="server">            <asp:GridView ID="GridView1" runat="server">            </asp:GridView>        </form>        <script language="javascript" type="text/javascript">                        function getTr(cControl){                            if (cControl.tagName == "TABLE") {                    return null;                }                                if (cControl.tagName == "TR") {                    return cControl                }                                return getTr(cControl.parentElement);            }                        $(document).ready(function(){                $("#bookinfor").hide();                                $("#<%=GridView1.ClientID %>").hover(function(){                    var trObj = getTr(arguments[0].srcElement);                    if (trObj != undefined) {                        var oCells = trObj.cells; // 可以取到每一行的内容了                        var o = oCells[0].innerHTML;                        $("#bookinfor").show();                        $("#bookxx").text(oCells[0].innerHTML);                    }                }, function(){                    $("#bookinfor").hide();                });            });        </script>    </body></html> 

读书人网 >asp.net

热点推荐