欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-31 13:40:25
...

前言

不知道是不是大家也遇到过类似的表单,但我绝对是第一次见,如下图所示,表单中包含了表格。
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);
             //该添加框隐藏后,主页面上的相应列表刷新
         });

后记

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

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