首页 前端知识 JQuery异步加载表格选择记录

JQuery异步加载表格选择记录

2024-03-15 11:03:09 前端知识 前端哥 133 725 我要收藏

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>");
        	});
        });
});
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3857.html
标签
asp.netmvc
评论
发布的文章

jQuery之class类操作

2024-04-12 20:04:54

jQuery 菜鸟教程学习

2024-04-12 20:04:22

jQuery

2024-01-31 12:01:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!