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 ...
随机推荐
- Turtlebot3新手教程:OpenCR软件设置(shell)
*本文针对如何利用脚本来更新固件进行讲解 具体步骤如下: burger的固件更新 $ export OPENCR_PORT=/dev/ttyACM0 $ export OPENCR_MODEL=bur ...
- 一次mongo查询不存在字段引发的事故
话说今天的一个小小的查询失误给了我比较深刻的教训,也让我对mongo有了更深刻的理解,下面我们来说说这个事情的原委: 我们经常使用阿里云子账号在DMS上查询线上数据库数据,今天也是平常的一次操作 集合 ...
- git版本回滚
本地版本回滚 git reset --hard <版本号> (git log 可查看版本号,版本号不用写全) 远程仓库版本回滚 先在本地将版本回滚 ,然后git push -f 强制提交
- PO,BO,VO,DTO,POJO,DAO,DO是什么?
PO (Persistent Object) 持久化对象,表示实体数据.BO (Business Object) 业务对象,主要是把逻辑业务封装为一个对象 .VO (Value/Vi ...
- 修改postman工具的代码生成工具让它锦上添花
@font-face { font-family: octicons-link; src: url("data:font/woff;charset=utf-8;base64,d09GRgAB ...
- SpringCloud --服务调用Feign
介绍 服务间通信简介 一个系统可以由不同的微服务构成,比如一个电商系统可以由订单服务.商品服务.用户服务等共同组成. 这些服务相互独立,但又相互依赖.由于它们相互依赖,所以需要通过通信的方式来进行相互 ...
- 紧急预警】关于爆发的 incaseformat 病毒事件亲身体验
相关报道 incaseformat病毒 360安全卫士服务号 https://mp.weixin.qq.com/s/KM6esd1eUlBt-YHtEwnfuw 广东省网络安全应急响应平台 https ...
- LeetCode374 猜数字大小
我们正在玩一个猜数字游戏. 游戏规则如下:我从 1 到 n 选择一个数字. 你需要猜我选择了哪个数字.每次你猜错了,我会告诉你这个数字是大了还是小了.你调用一个预先定义好的接口 guess(int n ...
- APPIUM-Android自动化元素定位方式
一.常用元素定位方法 appium从selenium中继承了所有的元素定位方法, 并且增加了一些自己的元素定位方式,下方截图分别为selenium和MobileBy包源码: 但是从继承selenium ...
- Python找对称数——纪念第一次自主编写代码
2021-01-17 题目: [问题描述]已知10个四位数输出所有对称数及个数 n,例如1221.2332都是对称数[输入形式]10个四位数,以空格分隔开[输出形式]输入的四位数中的所有对称数,对称数 ...