您的位置：首页 > Web前端 > JQuery

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

2014-03-24 11:18 579 查看

老样子，写一个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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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