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

媒介

不知道是否是人人也遇到过相似的表单,但我相对是第一次见,以下图所示,表单中包含了表格。
《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的表格

《js猎取表格中的数据 以及 表格中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模板引擎,你也可以用别的^_^
官网 :http://juicer.name/

含checkbox的表格

《js猎取表格中的数据 以及 表格中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);
             //该增加框隐蔽后,主页面上的响应列表革新
         });

跋文

可能写的思绪有些乱,看不懂,不是你缘由,那一定是我写的太低劣,表达不清楚。。。

因为这是公司项目里用到的,不可能贴完全代码,所以,只言片语表达不清楚的处所,还请体谅^_^

    原文作者:北堂棣
    原文地址: https://segmentfault.com/a/1190000004671494
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞