JQuery异步加载表格选择记录
JQuery异步加载表格选择记录
JQuery操作表格
首先在页面中定义一个表格对象
<table id="insts" class="table"><thead><tr><th>列1</th><th>列2</th><th>例3</th><th></th></tr></thead><tbody></tbody>
</table>
其中<tbody>中数据为空，当加载数据时，需要往里填充数据。
另外在页面中加入下面标签用以触发响应。
<button id="btnSearch">查找</button>
在页面初始化的处理函数中加入下面代码用以响应。
<script type="text/javascript">
$(function () {$("#btnSearch").button().on("click", function(){
});
JQuery操作表格的方法
- 清空表格内的数据
$("#insts tbody").empty();
- 加载表格数据
$("#insts tbody").append("<tr><td>" + details + "</td><td>" + item["assLangName"] + "</td><td>" + sel + "</td></tr>");
其中details, item["assLangName"]和sel是要填充的数据。
异步加载
异步加载使用JQuery提供的getJSON方法，利用JSON对象可以方便的填充数据。其中item["assLangName"]是JSON数组中某一子项中的assLangName成员。
假设从服务端传过来的成员对象如下
var instLink = 远程链接地址;$.getJSON(instLink,function (data) {$.each(data, function (i, item) {var details = 数据1;var sel = 数据2;$("#insts tbody").append("<tr><td>" + details + "</td><td>" + item["assLangName"] + "</td><td>" + sel + "</td></tr>");});});
然后将上述代码加入到$("#btnSearch")的单击响应函数中。
<script type="text/javascript">
$(function () {$("#btnSearch").button().on("click", function(){var instLink = 远程链接地址;$.getJSON(instLink,function (data) {$.each(data, function (i, item) {var details = 数据1;var sel = 数据2;$("#insts tbody").append("<tr><td>" + details + "</td><td>" + item["assLangName"] + "</td><td>" + sel + "</td></tr>");});});
});