JS从后台获取数据，前台动态添加tr标签中的td标签

最新推荐文章于 2023-09-20 22:30:00 发布

爱是与世界平行

最新推荐文章于 2023-09-20 22:30:00 发布

阅读量1w

点赞数 1

分类专栏： # ➹➹➹②JavaScript、JQuery 文章标签： JS动态添加td td

本文链接：https://blog.csdn.net/An1090239782/article/details/80893060

版权

➹➹➹②JavaScript、JQuery 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

功能描述：
要求从后台查询该省份的所有城市，然后动态的再前台固定的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