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>");
});
});
});