功能描述:

要求从后台查询该省份的所有城市,然后动态的再前台固定的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标签的更多相关文章

  1. 将数据内容动态添加到HTML中

    // 申明一个数组用来装遍历的元素 var li = []; //遍历元素并加载到标签中 for(var i = 0; i<navGroup.self_first_nav.length; i++ ...

  2. zf-关于<ww:iterator /> 标签中的<td /> 标签添加序号问题

    一开始代码是这样的 那个<ww:if> 标签 是我添加的,可是添加之后出问题了. 因为我加了一个判断语句,使得不需要的信息没显示出来,导致#li.count 这个显示下标的方法行不通了 之 ...

  3. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  4. 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

    在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...

  5. ligerUI---下拉菜单(menubar)动态显示(从后台获取数据)

    写在前面: ligerui的下拉菜单是有点丑的,这也是没有办法的事........这里主要记录下,如何从后台获取数据进行菜单显示. 有两种方式:1.使用json数组来动态添加  2.字符串拼接.  其 ...

  6. Swift - 后台获取数据(Background Fetch)的实现

    前面讲了如何让程序申请后台短时运行.但这个额外延长的时间毕竟有限.所以从iOS7起又引入两种在后台运行任务的方式:后台获取和后台通知. 1,后台获取介绍 后台获取(Background Fetch)是 ...

  7. Vue---从后台获取数据vue-resource的使用方法

    作为前端人员,在开发过程中,我们大多数情况都需要从后台请求数据,那么在vue中怎样从后台获取数据呢?接下来,我简单介绍一下vue-resource的使用方法,希望对大家有帮助. 一.下载vue-res ...

  8. 一、表单和ajax中的post请求&&后台获取数据方法

    一.表单和ajax中的post请求&&后台获取数据方法 最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前 ...

  9. Jquery获取select option动态添加自定义属性值失效

    Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/3909 ...

随机推荐

  1. Turtlebot3新手教程:OpenCR软件设置(shell)

    *本文针对如何利用脚本来更新固件进行讲解 具体步骤如下: burger的固件更新 $ export OPENCR_PORT=/dev/ttyACM0 $ export OPENCR_MODEL=bur ...

  2. 一次mongo查询不存在字段引发的事故

    话说今天的一个小小的查询失误给了我比较深刻的教训,也让我对mongo有了更深刻的理解,下面我们来说说这个事情的原委: 我们经常使用阿里云子账号在DMS上查询线上数据库数据,今天也是平常的一次操作 集合 ...

  3. git版本回滚

    本地版本回滚 git reset --hard <版本号> (git log 可查看版本号,版本号不用写全) 远程仓库版本回滚 先在本地将版本回滚 ,然后git push -f 强制提交

  4. PO,BO,VO,DTO,POJO,DAO,DO是什么?

    PO (Persistent Object)   持久化对象,表示实体数据.BO (Business Object)        业务对象,主要是把逻辑业务封装为一个对象 .VO (Value/Vi ...

  5. 修改postman工具的代码生成工具让它锦上添花

    @font-face { font-family: octicons-link; src: url("data:font/woff;charset=utf-8;base64,d09GRgAB ...

  6. SpringCloud --服务调用Feign

    介绍 服务间通信简介 一个系统可以由不同的微服务构成,比如一个电商系统可以由订单服务.商品服务.用户服务等共同组成. 这些服务相互独立,但又相互依赖.由于它们相互依赖,所以需要通过通信的方式来进行相互 ...

  7. 紧急预警】关于爆发的 incaseformat 病毒事件亲身体验

    相关报道 incaseformat病毒 360安全卫士服务号 https://mp.weixin.qq.com/s/KM6esd1eUlBt-YHtEwnfuw 广东省网络安全应急响应平台 https ...

  8. LeetCode374 猜数字大小

    我们正在玩一个猜数字游戏. 游戏规则如下:我从 1 到 n 选择一个数字. 你需要猜我选择了哪个数字.每次你猜错了,我会告诉你这个数字是大了还是小了.你调用一个预先定义好的接口 guess(int n ...

  9. APPIUM-Android自动化元素定位方式

    一.常用元素定位方法 appium从selenium中继承了所有的元素定位方法, 并且增加了一些自己的元素定位方式,下方截图分别为selenium和MobileBy包源码: 但是从继承selenium ...

  10. Python找对称数——纪念第一次自主编写代码

    2021-01-17 题目: [问题描述]已知10个四位数输出所有对称数及个数 n,例如1221.2332都是对称数[输入形式]10个四位数,以空格分隔开[输出形式]输入的四位数中的所有对称数,对称数 ...