1. 爱易网页
  2. ASP.NET教程
  3. Jquery与GridView结合使用的有关问题

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

日期：2014-05-17　 浏览次数：20529 次

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>

相关资料更多>

  1. 为何小于10的数除以10都等于0呢
  2. asp.net mvc 中 Html.EditorFor 怎么添加 htmlattribute 属性 小弟我想把 @Html.EditorFor(model
  3. lucene.net没关键字用盘古分词查询全部 怎样实现。
  4. 主表和子表数据同时在绑定控件显示
  5. 一个拷贝整个文件夹(包括子文件夹)的方法（原创）
  6. 未能建立与(local)的联接
  7. 关于 UpdatePanel的有关问题，执行时间很长，咋回事
  8. ASP.NET学习：认识Web.config文件
  9. 问一个Access数据统计 占比 的有关问题