jQuery ajax动态生成table功能示例

参考：https://blog.csdn.net/weixin_39919395/article/details/86289521
1、前台html,jquery,ajax

   //(1)动态的创建一个table
    function createShowingTable(data) {

     var tableStr = "<table class='tab-list' width='99%'>";

     tableStr = tableStr

       + "<tr class='list-header'>"

       +"<td width='5%'>序号</td>"

       +"<td width='15%'><input id='checkAll' name='checkAll'  type='radio' /></td>"

       +"<td width='20%'>座位行号</td>"

       +"<td width='20%'>座位列号</td>"

       +"<td width='20%'>订购状态</td>"

       +"</tr>";

     var len = data.length;

     for ( var i = 0; i < len; i++) {

      tableStr = tableStr + "<tr>"

        +"<td>"+ (i+1) + "</td>"

        +"<td id='checkOne1'><input class='checkOne'  id='checkOne'  name='checkOne' type='radio' value='"+data[i].seatId+"' /></td>"

        +"<td>"+ (data[i].seatRowindex+1) + "</td>"

        + "<td>"+ (data[i].seatColsindex+1) + "</td>"

        + "<td>"+ (data[i].orderSeatStatus==0?'可预订':'不可预订') + "</td>"
       
        +"</tr>";

     }
     
      /* if(len<=0){
	      tableStr = tableStr + "<tr style='text-align: center'>"
	
	      +"<td colspan='5'><font color='red'>"+暂无记录+"</font></td>"
	
	      +"</tr>";

     } 
 */
     tableStr = tableStr + "</table>";
     //添加到div中
     $("#tableAjax").html(tableStr);
    
    }
    (2)ajax
    //选择电影
   function selectMovie() {
       var select1 = $("option:selected").val();
       var movieName=$("#movieOrder_scheduleObj_scheduleId").find("option:selected").text();  //获取Select选择的Text
       var scheduleId = $("#movieOrder_scheduleObj_scheduleId").val();
       
       alert("你选择的是："+select1+",movieName:"+movieName);
       $('#movieOrder_rowsIndex').val(null);//清空值
	   $('#movieOrder_cols').val(null);
	   $('#movieOrder_price').val(null);//清空价格
	   //根据 scheduleId获取 movieHallId
	   $.ajax({
			url: basePath + "MovieOrder/getMovieHallId",
			type: "get",
			async: false,//同步
			data:{      
				   scheduleId:scheduleId
	          },  
	       success : function(data) {
					if(data.movieHallId!=null){ 
						$("#movieHallId").val(data.movieHallId);//赋值
					} else {
						alert("数据为空！！！");
					}
				},
	   });
      //初始化 影厅座位图表 绑定数据
   	  $.ajax({
		url: basePath + "MovieOrder/getMoviePrice",
		type: "get",
		async: false,//同步
		data:{      
			   movieName:movieName
          },   
		success: function(movieList,response,status) { 	
    		$(movieList).each(function(i,movieList){
    			alert("movieList.price:"+movieList.price);
    			$('#movieOrder_price').val(movieList.price);//赋值价格
    		});
    	}
	 });
   	  var movieHallId=$("#movieHallId").val();
  	  alert("影厅id:"+movieHallId);
   	  //创建表格
   	  $.ajax({
   		url: basePath + "MovieOrder/seatOrderList",
   		type: "get",
   		async: false,//同步
   		data:{      
   			   movieHallId : movieHallId
             },      
   		success: function(seatOrderList,response,status) {
   			$("#tableAjax").empty();//创建表格前先清空
   		    createShowingTable(seatOrderList);//动态创建表格
       	}
   	});
    };

2、后台 springMVC

/*ajax方式查询座位显示可定的座位*/
	@RequestMapping(value = { "/seatOrderList" }, method = {RequestMethod.GET,RequestMethod.POST})
	public void seatOrderList(HttpServletResponse response,
			@RequestParam(value="movieHallId",defaultValue="0",required=false)int  movieHallId,
			@RequestParam(value="seatId",defaultValue="0",required=false)int  seatId,
			@RequestParam(value="movieName",defaultValue="",required=false)String  movieName,
			String movieType,String director,String area,String releaseDate,Integer page,Integer rows, Model model, HttpServletRequest request) throws Exception {
		List<SeatOrder> seatOrderList=seaOrderService.querySeatOrder(movieHallId,seatId);
        response.setContentType("text/json;charset=UTF-8"); 
		PrintWriter out = response.getWriter();
		JSONArray jsonArray = new JSONArray();
		for(SeatOrder seatOrder:seatOrderList) {
			JSONObject jsonMovieOrder = new JSONObject();
			jsonMovieOrder.accumulate("seatId", seatOrder.getSeatId());
			jsonMovieOrder.accumulate("seatRowindex", seatOrder.getSeatRowindex());
			jsonMovieOrder.accumulate("seatColsindex", seatOrder.getSeatColsindex());
			jsonMovieOrder.accumulate("orderSeatStatus", seatOrder.getOrderSeatStatus());
			jsonMovieOrder.accumulate("movieHallId", seatOrder.getMovieHallId());
			
			jsonArray.put(jsonMovieOrder);
		}
		out.println(jsonArray.toString());
		out.flush();
		out.close();
	}