JS从后台获取数据,前台动态添加tr标签中的td标签
功能描述:
要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息;
文章目录
#一、前台jsp及js源码
jsp:在固定的tr标签中添加一个id,通过js方法来获取该tr标签
<tr id="lineDrop">
<!-- 在这里面动态的添加td标签。 -->
</tr>
js:页面加载完成后,执行操作。
向后台请求数据json格式的数据,将获取到的数据赋值给所需添加的td标签当中。
$(function () {
//城市测试
var temp_html;
//后台请求数据
$.post('/gj/gj/exam/gjSubsidyMoneyList.do?action=getLineCity',{'code':45},function(result){
var lineInfo = $.each(result.cityName,function(i, lineInfo){
//添加相对应的的td标签等
temp_html+="<td align='center' width='80'><input name='compareValue' type='checkbox' id='"+lineInfo.tdid+"' value='"+lineInfo.cityCode+"'>"+lineInfo.cityName+"</input></td>";
temp_html+="<td><input type='text' style='width: 100px' upload='true' name='"+lineInfo.cinput+"'></input></td>";
});
//将新添加的td标签,添加进tr标签中
$("#lineDrop").append(temp_html);
})
})
#二、后台action
public String getLineCity(){
//获取该省下面的所有城市信息;
List<GjOrganization> cityList = hrOrganizationService.retrieveSub(
Long.valueOf("45"), false);
List<Map<String,Object>> lineList = new ArrayList<Map<String, Object>>();
for(int i=0;i<cityList.size();i++){
Map<String,Object> map = new HashMap<String, Object>();
map.put("tdid","compareValue"+(i+1));
map.put("cityCode",cityList.get(i).getGroupCode() );
map.put("cityName", cityList.get(i).getGroupName().replace("市", ""));
lineList.add(map);
}
result.put("cityName",lineList);
result.put("tdid",lineList);
return "resultData";
}
另外还看到一篇js动态添加tr,td标签的文章,觉得不错,记录下来:
js动态添加trtd
JS从后台获取数据,前台动态添加tr标签中的td标签的更多相关文章
- 将数据内容动态添加到HTML中
// 申明一个数组用来装遍历的元素 var li = []; //遍历元素并加载到标签中 for(var i = 0; i<navGroup.self_first_nav.length; i++ ...
- zf-关于<ww:iterator /> 标签中的<td /> 标签添加序号问题
一开始代码是这样的 那个<ww:if> 标签 是我添加的,可是添加之后出问题了. 因为我加了一个判断语句,使得不需要的信息没显示出来,导致#li.count 这个显示下标的方法行不通了 之 ...
- ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...
- 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??
在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...
- ligerUI---下拉菜单(menubar)动态显示(从后台获取数据)
写在前面: ligerui的下拉菜单是有点丑的,这也是没有办法的事........这里主要记录下,如何从后台获取数据进行菜单显示. 有两种方式:1.使用json数组来动态添加 2.字符串拼接. 其 ...
- Swift - 后台获取数据(Background Fetch)的实现
前面讲了如何让程序申请后台短时运行.但这个额外延长的时间毕竟有限.所以从iOS7起又引入两种在后台运行任务的方式:后台获取和后台通知. 1,后台获取介绍 后台获取(Background Fetch)是 ...
- Vue---从后台获取数据vue-resource的使用方法
作为前端人员,在开发过程中,我们大多数情况都需要从后台请求数据,那么在vue中怎样从后台获取数据呢?接下来,我简单介绍一下vue-resource的使用方法,希望对大家有帮助. 一.下载vue-res ...
- 一、表单和ajax中的post请求&&后台获取数据方法
一.表单和ajax中的post请求&&后台获取数据方法 最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前 ...
- Jquery获取select option动态添加自定义属性值失效
Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/3909 ...
随机推荐
- 第5章节 BJROBOT SLAM 构建地图
第五章节 BJROBOT SLAM 构建地图 建地图前说明:请确保你的小车已经校正好 IMU.角速度.线速度,虚拟机配置好 ROS 网络的前提进行,否则会造成构建地图无边界.虚拟机端无法正常收到小 ...
- mysql 双主复制 windows10
1. 整体思路 MySQL开始复制是很简单的过程,不过,根据特定的应用场景,都会在基本的步骤上有一些变化.最简单的场景就是一个新安装的master和slave,整个过程如下:(1)在每个服务器上创建一 ...
- Android基本组件TextView和EditView
1.TextView 用于在屏幕上显示文本,可以显示单行文本,多行文本,和带图像的文本. 常用xml属性 (1)android:autoLink,用于指定是否将指定的文本转换为可单机的超链接形式,其属 ...
- 【ASP.NET Core】Blazor 服务器端的 Base Path
提到 Blazor,没准就会有人问:选用 Server 端还是 WebAssembly(客户端)?其实这个不用纠结,老周个人的原则是:Server 端优先.理由很单纯:服务器端虽然消耗服务器上的资源, ...
- 【并发编程】- ThreadPoolExecutor篇
Executor框架 Executor框架的两级调度模型(基于HotSpot) 在上层,Java多线程程序通常把应用分解为若干个任务,然后使用用户级的调度器(Executor框架)将这些任务映射为固定 ...
- Hbase原理(转学习自用)
一.系统架构 从HBase的架构图上可以看出,HBase中的组件包括Client.Zookeeper.HMaster.HRegionServer.HRegion.Store.MemStore.Stor ...
- ORA-28001: the password has expired解决方法
Oracle提示错误消息ORA-28001: the password has expired,是由于Oracle11G的新特性所致, Oracle11G创建用户时缺省密码过期限制是180天(即6个月 ...
- JVM故障处理工具,使用总结
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 用都用不到怎么学? 没有场景.没有诉求,怎么学习这些似乎用不上知识点. 其实最好的方 ...
- 直播预告:Quadro RTX显卡助力Twinmotion在建筑表现领域火力全开
新年伊始,泛CG继续起航! 2021年首期泛CG分享会 我们邀请了两位业界大咖一起分享 NVIDIA GPU实时渲染在建筑可视化领域的应用 新的一年,继续相约! 1.嘉宾介绍 魏老师从事设计可视化工作 ...
- 用 Flutter 搭建标签+导航框架
前言 在 Flutter 这个分类的第一篇文章总结了下最新的 Mac 搭建 Flutter 开发环境和对声明式UI这个理解的东西,前面也有提过,准备像在 SwiftUI 分类中那样花一些功夫来写一个 ...