1. 程式人生 > >JS從後臺獲取資料,前臺動態新增tr標籤中的td標籤

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