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>
[解决办法]
<!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>