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