asp.net JQuery Ajax WebService 搜索自动匹配动态生成表格点击表格获取表格内容

最新推荐文章于 2018-07-03 14:18:39 发布

anihasiyou

最新推荐文章于 2018-07-03 14:18:39 发布

阅读量1.1k

点赞数

分类专栏： Ajax asp.net/asp.net mvc/C# Web前端/javascript/jQuery 文章标签： asp.net webservice jquery ajax 搜索

本文链接：https://blog.csdn.net/anihasiyou/article/details/21940299

版权

asp.net/asp.net mvc/C# 同时被 3 个专栏收录

70 篇文章 1 订阅

订阅专栏

Web前端/javascript/jQuery

41 篇文章 0 订阅

订阅专栏

Ajax

7 篇文章 0 订阅

订阅专栏

老样子，写一个WebService方法GetAuto

[WebMethod]
    //[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<GWInfo> GetGwName(string prefix)
    {
        List<GWInfo> persons = new List<GWInfo>();
        GWInfo a = new GWInfo();
        a.dep = prefix;
        foreach (GWInfo g in GW.GetGWByA(a))
        {
            persons.Add(g);
        }
        return persons; 
    }

在前台aspx页面写jq方法（引用jq库）

<head>
<script src="../JQuery/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
	
//点击屏幕其他位置隐藏divTb
    $(document).click(function (e) {
        if (e.target.id != 'txtSearchTable') {
            $("#myTb").empty();
             $("#divTb").hide();
            }
    })
    $(function () {
        $("#txtSearchTable").bind('input propertychange', function () {
            $.ajax({
                url: '<%=ResolveUrl("~/Test/GetAuto.asmx/GetGwName") %>',
                data: "{ 'prefix': '" + $(this).val() + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (JsonData) {
                    var tbBody = "";
                    $("#myTb").empty();
                    $(JsonData.d).each(function () {
                        tbBody += "<tr><td>" + this.code + "</td>" + "<td>" + this.name + "</td>" + "<td>" + this.dep + "</td></tr>";
                    })
                    $("#myTb").append(tbBody);
                    if ($("#myTb").find("td").length > 0) {
                        $("#divTb").show();
                        ClickTr();
                    }
                    else {
                        $("#divTb").hide();
                    }
                }
            });
        });
    });
    function ClickTr() {
        $("#myTb tr").click(
            function () {
                $("#txt").val($(this).find('td:eq(0)').text());
                $("#txt2").val($(this).find('td:eq(1)').text());
                $("#myTb").empty();
                $("#divTb").hide();
            });
    }
    </script>  
</head>
<body>
    <form id="form1" runat="server">
自动匹配表格:<input id="txtSearchTable" name="txtSearchTable" class="wid10" type="text" value="" /> <input type="text" id="txt" value=" "/><input type="text" id="txt2" value=" "/>
    <div id="divTb"  style=" width:800px; height:200px; overflow:scroll;display:none;position:absolute;z-index:9;background:green;">
        <table id="myTb">
        </table>
    </div>
</form>
</body>

anihasiyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net JQuery Ajax WebService 搜索自动匹配动态生成表格点击表格获取表格内容

老样子，写一个WebService方法GetAuto[WebMethod] //[ScriptMethod(ResponseFormat = ResponseFormat.Json)] public List GetGwName(string prefix) { List persons = new List(); GWInfo a
复制链接

扫一扫