js获取表格中的数据 以及 表格中checkbox选中一行数据

摘要：获取添加保存时数据提交的地址表中数据条数获取获取成绩不为空的成绩值获取当前节点的刷新列表含的表格有的情况下，没被选中的那条记录以及选中了但的为空的那条记录都不必提交。

不知道是不是大家也遇到过类似的表单，但我绝对是第一次见，如下图所示，表单中包含了表格。

上图中的表格数据是根据数据库中学生表而变化的，这增加了获取表中数据的复杂程度，这里仅仅是记录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
后记
可能写的思路有些乱，看不懂，不是你原因，那一定是我写的太差劲，表达不清晰。。。
由于这是公司项目里用到的，不可能贴完整代码，所以，只言片语表达不清楚的地方，还请谅解^_^