摘要：獲取添加保存時數據提交的地址表中數據條數獲取獲取成績不為空的成績值獲取當前節點的刷新列表含的表格有的情況下，沒被選中的那條記錄以及選中了但的為空的那條記錄都不必提交。

不知道是不是大家也遇到過類似的表單，但我絕對是第一次見，如下圖所示，表單中包含了表格。

上圖中的表格數據是根據數據庫中學生表而變化的，這增加了獲取表中數據的復雜程度，這里僅僅是記錄js如何獲取數據傳值到后端的辦法，所以，僅以表格中張三、李四為例。

  

     

     
課程
     

     

         
             

              
     
     

     

       

         

            
序號
            
學號
            
姓名
            
成績
         
       
       

            
       
    
  

    

     

       
共
          頁/ 共
          條數據, 每頁顯示
              
                10
                20
                50
                條
           

              

                
                  «
                
              
              
1
              

                
                 »
                
              
          
         
       
     
   


   取消
   保存
 

css就略了。。。

表格內容加載：

function student_list(class_id,pageno){
    var size =$("#maxsize").val()?$("#maxsize").val():20;
    //Ajax 獲取添加框的學生信息分頁列表的 URL 地址
    var url ="/server/student/info/pagelist.json?size="+size+"&start="+pageno;
    var  data={
        classId: class_id
    };
    $.getJSON(url,data,function(rtn){
        var datalist = student_list_html(rtn);
        $("#student-list").html(datalist);
        $("#page-info-add").html(data_page(rtn.totalElements,rtn.totalPages,rtn.number,"student-list","maxsize"));
        $("#maxsize option[value = "+size+"]")[0].selected = true;
        $("#maxsize").change(function(){
             student_list(class_id,0);
        })
    });
}

function student_list_html(page){
    var tpl=[
             "{@each content as it,k}",
             "",            
             "${parseInt(k)+1}" ,
             "${it.studentCode}",
             "${it.studentName}",
             "",
              "",
                     "",                   
                 "",
             "",
         "", 
         "{@/each}"
    ].join("
");
    return juicer(tpl,page);
}

注：這里用的是juicer模板引擎，你也可以用別的^_^
官網 ：http://juicer.name/

注意：html中表頭如下：

             
                序號
                學號
                姓名
                成績
             
           

js中表格內容如下：

function student_list_html(page){
    var tpl=[
             "{@each content as it,k}",
             "",
               "",
                 "",
                     "",
                     "",
                 "",
             "",            
             "${parseInt(k)+1}" ,
             "${it.studentCode}",
             "${it.studentName}",
             "",
              "",
                     "",                   
                 "",
             "",
         "", 
         "{@/each}"
    ].join("
");
    return juicer(tpl,page);
}

沒有checkbox的情況下，input的value為空的那條記錄不必提交。

      var url = "/server/score/info/add.json";//Ajax 獲取添加保存時數據提交的 URL 地址
      var ids = [ ];
      var score1s=[ ];
    //表中數據條數
      var Num=$("#page-info-add .totalElements").text();
      for(var i=1;i<=Num;i++){
           if ( $("#score1s_"+i+" ").val() !=""){
             //獲取studentId
              ids.push($("#score1s_"+i+" ").attr("name"));
           }
      }     
      //獲取成績不為空的成績值
      var courseId =$("#add-course-id").val();
      score1s = $("#student-list input").map(function(i,v){return v.value}).filter(function(i,v){return v.trim() !== ""}) .toArray();   
      var data={
          studentIds: ids,
          courseId: courseId,
          score1s: score1s
          };
        jQuery.ajaxSettings.traditional = true;   
        
        $.getJSON(url,data,function(rtn){
            $("#modal-exam-score-add").modal("hide");
            showDialog(rtn.code);
             //獲取當前節點的classId
            var class_id=curNode.id;
             //刷新列表
            exam_score_list(class_id,0);
         });   

有checkbox的情況下，沒被選中的那條記錄以及選中了但input的value為空的那條記錄都不必提交。

var url = "/server/score/info/add.json";//Ajax 獲取添加保存時數據提交的 URL 地址
      var ids = [ ];
      var score1s=[ ];
      var chkBoxes = $("#student-list").find("input:checked");
      if (chkBoxes.length == 0) {
        showDialog("請至少選擇一個學生");
          return false;
      }
      $(chkBoxes).each(function() {
        ids.push($(this).attr("id"));
      }); 
      var courseId =$("#add-course-id").val();
      for(var i=0;i
后記
可能寫的思路有些亂，看不懂，不是你原因，那一定是我寫的太差勁，表達不清晰。。。
由于這是公司項目里用到的，不可能貼完整代碼，所以，只言片語表達不清楚的地方，還請諒解^_^