• 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=' 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

  • 相关阅读:
    Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2) E. The Supersonic Rocket
    Codeforces Round #500 (Div. 2) D
    AtCoder Grand Contest 026 D
    Codeforces Round #495 (Div. 2) Sonya and Matrix
    AtCoder Regular Contest 100 E
    1013 数素数
    1010 一元多项式求导(用while接收输入)
    1009 说反话(字符串、栈)
    L2-006 树的遍历 (后序中序求层序)
    L2-004 这是二叉搜索树吗?
  • 原文地址:https://www.cnblogs.com/aixing/p/13327536.html
Copyright © 2020-2023  润新知