JQuery异步加载表格选择记录

2024-01-09 09:33:07

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="selInst">选择</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>");
        	});
        });
});

文章来源:https://blog.csdn.net/JimFire/article/details/135471369
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。