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

前言

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

上图中的表格数据是根据数据库中学生表而变化的，这增加了获取表中数据的复杂程度，这里仅仅是记录js如何获取数据传值到后端的办法，所以，仅以表格中张三、李四为例。

示例代码

html

<div class="modal-body">
  <form id="exam-score-add-form" class="smart-form">
     <dl class="dl-horizontal fullscreen-dl ">
     <dt>课程</dt>
     <dd>
     <section class="col col-6">
         <label class="select">
             <select name="courseId" id="add-course-id">

              </select><i></i>
     </section>
     </dd>

     <table id="table-student-list" class="table table-hover table-bordered smart-form has-tickbox">
       <thead>
         <tr>
            <th width="6%">序号</th>
            <th width="28%">学号</th>
            <th width="30%">姓名</th>
            <th width="30%">成绩</th>
         </tr>
       </thead>
       <tbody id="student-list">
            
       </tbody>
    </table>
  <div class="row">
    <div class="page col-xs-12 col-sm-12 col-md-12 col-lg-12">
     <div id="page-info-add" class="clearfix pull-right mt15">
       <div class="pagination-info pull-left">共
          <span class="totalPages"></span>页/ 共
          <span class="totalElements"></span>条数据, 每页显示
              <select class="input-mini" id="maxsize">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                </select>条</div>
           <ul class="pull-right pagination">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="active"><a href="#">1</a></li>
              <li>
                <a href="#" aria-label="Next">
                 <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
          </ul>
         </div>
       </div>
     </div>
   </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal"><i class='fa fa-times'></i> 取消</button>
  <button type="button" class="btn btn-info" id="btn-exam-score-save"><i class='fa fa-floppy-o'></i> 保存</button>
 </div>

css就略了。。。

js

表格内容加载：

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);
        })
    });
}

不含checkbox的表格

function student_list_html(page){
    var tpl=[
             '{@each content as it,k}',
             '<tr>',            
             '<td>${parseInt(k)+1}</td>' ,
             '<td>${it.studentCode}</td>',
             '<td>${it.studentName}</td>',
             '<td>',
              '<label class="input remind">',
                     '<input type="text" name="${it.id}" id="score1s_${parseInt(k)+1}">',                   
                 '</label>',
             '</td>',
         '</tr>', 
         '{@/each}'
    ].join('\n');
    return juicer(tpl,page);
}

注：这里用的是juicer模板引擎，你也可以用别的^_^
中文文档: https://github.com/PaulGuo/Ju...

含checkbox的表格

注意：html中表头如下：

<thead>
             <tr>
                <th width="6%">序号</th>
                <th width="28%">学号</th>
                <th width="30%">姓名</th>
                <th width="30%">成绩</th>
             </tr>
           </thead>

js中表格内容如下：

function student_list_html(page){
    var tpl=[
             '{@each content as it,k}',
             '<tr>',
               '<td>',
                 '<label class="checkbox">',
                     '<input type="checkbox" class="invechk" name="checkbox-inline" id="${it.id}">',
                     '<i></i>',
                 '</label>',
             '</td>',            
             '<td name="${it.id}">${parseInt(k)+1}</td>' ,
             '<td>${it.studentCode}</td>',
             '<td>${it.studentName}</td>',
             '<td>',
              '<label class="input remind">',
                     '<input type="text" id="score1s_${parseInt(k)+1}">',                   
                 '</label>',
             '</td>',
         '</tr>', 
         '{@/each}'
    ].join('\n');
    return juicer(tpl,page);
}

js获取表格中的数据

不含checkbox的表格

没有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的表格

有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<chkBoxes.length;i++){
            var tdname=ids[i];
            //获取checked该条记录的序号
            var  n = $("td[name="+tdname+"]").text();
            if ( (i+1)==n ) {
             //若该记录的序号n与score1s的id: score1s_n对应，则获取该成绩值
             score1s.push($('#score1s_'+n+'').val());
            }
      }
       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);
             //该添加框隐藏后，主页面上的相应列表刷新
         });

后记

可能写的思路有些乱，看不懂，不是你原因，那一定是我写的太差劲，表达不清晰。。。

由于这是公司项目里用到的，不可能贴完整代码，所以，只言片语表达不清楚的地方，还请谅解^_^