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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/235956.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ 数组分页,经常有用到分页,索性做一个简单封装 已解决

在项目设计中&#xff0c; 有鼠标滑动需求&#xff0c;但是只能说能力有限&#xff0c;索性使用 php版本的数组分页&#xff0c;解决问题。 经常有用到分页&#xff0c;索性做一个简单封装、 测试用例 QTime curtime QTime::currentTime();nHour curtime.hour();nMin curtim…

leetcode动态规划(零钱兑换II、组合总和 Ⅳ)

518.零钱兑换II 给定不同面额的硬币和一个总金额。写出函数来计算可以凑成总金额的硬币组合数。假设每一种面额的硬币有无限个。 示例 1: 输入: amount 5, coins [1, 2, 5] 输出: 4 解释: 有四种方式可以凑成总金额: 55 5221 52111 511111 示例 2: 输入: amount 3, coi…

Macos下修改Python版本

MacOS下修改Python版本 安装 查看本机已安装的Python版本&#xff1a;where python3 ~ where python3 /usr/bin/python3 /usr/local/bin/python3 /Library/Frameworks/Python.framework/Versions/3.12/bin/python3如果没有你想要的版本&#xff0c;去python官网下载安装包。…

uniapp自定义封装只有时分秒的组件,时分秒范围选择

说实话&#xff0c;uniapp和uview的关于只有时分秒的组件实在是不行。全是日历&#xff0c;但是实际根本就不需要日历这玩意。百度了下&#xff0c;终于看到了一个只有时分秒的组件。原地址&#xff1a;原地址&#xff0c;如若侵犯请联系我删除 <template><view clas…

雷达信号处理——恒虚警检测(CFAR)

雷达信号处理的流程 雷达信号处理的一般流程&#xff1a;ADC数据——1D-FFT——2D-FFT——CFAR检测——测距、测速、测角。 雷达目标检测 首先要搞清楚什么是检测&#xff0c;检测就是判断有无。雷达在探测的时候&#xff0c;会出现很多峰值&#xff0c;这些峰值有可能是目标…

【微服务】日志搜集elasticsearch+kibana+filebeat(单机)

日志搜集eskibanafilebeat&#xff08;单机&#xff09; 日志直接输出到es中&#xff0c;适用于日志量小的项目 基于7.17.16版本 主要配置在于filebeat&#xff0c; es kibana配置改动不大 环境部署 es kibana单机环境部署 略 解压即可 常见报错&#xff0c;百度即可。 记录…

stm32引脚输入输出设置寄存器操作汇总

引脚数据表说明 实际历程 下图时正点原子i2c时使用的宏定义 注意事项 1.实际使用的并不是标准的输入输出&#xff08;i2c的开漏&#xff09;模式。 解释 SDA_IN() 使用了 0x8 0b 10 00 bit3 bit2 [0b10] bit1 bit0[00] &#xff08;上下拉输入模式&#xff09; &…

梦想贩卖机升级版知识付费源码实现流量互导,多渠道变现

梦想贩卖机升级版&#xff0c;变现宝吸收了资源变现类产品的许多优势&#xff0c;并剔除了那些无关紧要的元素&#xff0c;使得本产品在运营和变现能力方面实现了质的飞跃。多领域素材资源知识变现营销裂变独立版本。 支持&#xff1a;视频、音频、图文、文档、会员、社群、用…

yolov8n 瑞芯微RKNN和地平线Horizon芯片仿真测试部署,部署工程难度小、模型推理速度快

特别说明&#xff1a;参考官方开源的yolov8代码、瑞芯微官方文档、地平线的官方文档&#xff0c;如有侵权告知删&#xff0c;谢谢。 模型和完整仿真测试代码&#xff0c;放在github上参考链接 模型和代码。 因为之前写了几篇yolov8模型部署的博文&#xff0c;存在两个问题&…

记录一下Canal的错误,主要是top.javatool.canal.client.util下的StringConvertUtil引起的

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 由于数据库的一个localdatetime字段是空的&#xff0c; 然后修改数据库数据同步canal的时候报了这个错误&#xff1a; Caused by: java.lang.IllegalArgumentException: Can not set java.time.LocalD…

D盘能不能随便格式化?根据不同情况来分析

随着计算机技术的发展&#xff0c;D盘已成为许多用户存储重要数据和文件的一部分。然而&#xff0c;当我们想要对D盘进行格式化时&#xff0c;是否可以随意进行操作呢&#xff1f;本文将探讨这一问题&#xff0c;并给出关于“电脑D盘数据格式化后怎么恢复”的相关方法。 图片来…

jsonvue-mobile 联动方式说明。

目录 jsonvue-mobile的联动类型分为两种 一种是命令式的&#xff1a; 另一种是响应式的&#xff1a; 联动场景 场景一&#xff1a;某一个字段的值变化时&#xff0c;同步修改另一个字段的值 命令式&#xff1a; 响应式&#xff1a; 场景一演示效果GIF 场景二&#xff1…

kafka下载安装部署

Apache kafka 是一个分布式的基于push-subscribe的消息系统&#xff0c;它具备快速、可扩展、可持久化的特点。它现在是Apache旗下的一个开源系统&#xff0c;作为hadoop生态系统的一部分&#xff0c;被各种商业公司广泛应用。它的最大的特性就是可以实时的处理大量数据以满足各…

基于单片机设计的智慧农业大棚检测系统

一、设计目标 本项目基于单片机设计一个智慧农业大棚检测系统&#xff0c;以提供实时监测和管理大棚环境的关键参数。系统支持环境温度、湿度检测&#xff0c;光照强度检测&#xff0c;并能根据预设的阀值进行报警提示。为了实现数据的显示和管理&#xff0c;该系统还利用Qt开…

浏览器输入一个域名的解析过程

目录 从输入一个域名的解析过程 以www.baidu.com为例子 本地缓存和hosts文件 mDNS和LLMNR NBT-NS 路由器广播 Root域名服务器 顶级域名服务器 目标域名服务器 DNS解析完成 操作系统发起TCP连接&#xff1a; TCP三次握手&#xff1a; TCP连接的建立采用经典的三次握手过程&#…

C2855 命令行选项“/Zc:referenceBinding“与预编译头不一致和C2855 命令行选项“/Zc:__cplusplus“与预编译头不一致

在VS2019和Qt5.12.12环境下&#xff0c;笔记本上编译这个工程没有问题&#xff0c;把工程拷贝到台式机上&#xff0c;一样的配置&#xff0c;但是报如下错误&#xff1a; 打开项目的命令行配置如下&#xff1a; 解决办法&#xff1a;在编译选项"/Zc:referenceBinding"…

ptaR7-5打探基priority_queue的使用

题目 最近乐乐开发出了一款新的游戏《打探基》&#xff0c;这款游戏需要多人配合来玩&#xff0c;至少三个游戏玩家同时出招才能使探基的血量下降一点&#xff0c;同时&#xff0c;出招的每个人战斗力下降一点&#xff0c;当战斗力小于10的时候将不能再出招&#xff0c;不知道…

electron+vue网页直接播放RTSP视频流?

目前大部分摄像头都支持RTSP协议&#xff0c;但是在浏览器限制&#xff0c;最新版的浏览器都不能直接播放RTSP协议&#xff0c;Electron 桌面应用是基于 Chromium 内核的&#xff0c;所以也不能直接播放RTSP&#xff0c;但是我们又有这个需求怎么办呢&#xff1f; 市场上的方案…

一小时掌握:使用ScrapySharp和C#打造新闻下载器

引言 爬虫技术是指通过编程的方式&#xff0c;自动从互联网上获取和处理数据的技术。爬虫技术有很多应用场景&#xff0c;比如搜索引擎、数据分析、舆情监测、电商比价等。爬虫技术也是一门有趣的技术&#xff0c;可以让你发现网络上的各种有价值的信息。 本文将介绍如何使用…

Unity组件开发--长连接webSocket

1.下载安装UnityWebSocket 插件 https://gitee.com/cambright/UnityWebSocket/ 引入unity项目&#xff1a; 2.定义消息体结构&#xff1a;ExternalMessage和包结构Package&#xff1a; using ProtoBuf; using System; using System.Collections; using System.Collections.Ge…