JQuery异步加载表格选择记录

阿达King哥2024-01-13 23:58

JQuery异步加载表格选择记录

JQuery操作表格

首先在页面中定义一个表格对象

html 复制代码

<table id="insts" class="table">
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>例3</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

其中<tbody>中数据为空，当加载数据时，需要往里填充数据。

另外在页面中加入下面标签用以触发响应。

html 复制代码

<button id="btnSearch">查找</button>

在页面初始化的处理函数中加入下面代码用以响应。

javascript 复制代码

<script type="text/javascript">
$(function () {
	$("#btnSearch").button().on("click", function(){
});

JQuery操作表格的方法

清空表格内的数据

javascript 复制代码

$("#insts tbody").empty();

加载表格数据

javascript 复制代码

$("#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成员。

假设从服务端传过来的成员对象如下

javascript 复制代码

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")的单击响应函数中。

javascript 复制代码

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