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

biaoxiaoduan 发布于2019-08-19 17:57 / 1227人阅读

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

前言

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

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

示例代码 html

</>复制代码 
  
     
     课程
     
     
         
             
     
     
     
       
         
            
            
            
            
         
       
       
            
       
    
序号 学号 姓名 成绩
  
    
     
       共
          页/ 共
          条数据, 每页显示
              条
                         
                
                  «
                
              
              
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);
        })
    });
}

不含checkbox的表格

</>复制代码 
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/

含checkbox的表格

注意：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);
}

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
后记
可能写的思路有些乱，看不懂，不是你原因，那一定是我写的太差劲，表达不清晰。。。
由于这是公司项目里用到的，不可能贴完整代码，所以，只言片语表达不清楚的地方，还请谅解^_^

云服务器 GPU云服务器 js中表格怎么选中一行数据 js中获取表格数据 js点击表格添加一行数据 js表格复制最后一行数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79016.html

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

摘要：获取添加保存时数据提交的地址表中数据条数获取获取成绩不为空的成绩值获取当前节点的刷新列表含的表格有的情况下，没被选中的那条记录以及选中了但的为空的那条记录都不必提交。前言不知道是不是大家也遇到过类似的表单，但我绝对是第一次见，如下图所示，表单中包含了表格。showImg(https://segmentfault.com/img/bVtLdi); 上图中的表格数据是根据数据库中学生表...

Miyang 2019-08-01 15:09 评论0 收藏0
原生Js-msi系统

摘要：我也意识到在学习一个框架前，将框架的思想和原生的实现进行对比有多么重要。这个是目前为止一个大的框架思路，当然还要再进行每个功能的细分。表格将上一步的并集数据显示出来渲染分表格，表格有一个表头，用于展示商品的种类地区以及每月的销售情况。前言：由于刚入前端时间并不长，之前最近一直处在学习的阶段，现在准备找工作，回首看看之前学的，发现了很多的瑕疵。我分析觉得主要原因在于之前有些东西学的太快...

K_B_Z 2019-08-23 10:54 评论0 收藏0
HTML之body标签中的相关标签补充

摘要：一列表标签列表标签分为三种。二表格标签表格标签用表示。单元格和单元格之间的距离外边距，像素为单位。例如表示当前单元格在水平方向上要占据两个单元格的位置。输入标签文本框输入标签文本框用于接收用户输入。一列表标签　　列表标签分为三种。　　1、无序列表，无序列表中的每一项是　　　　英文单词解释如下：　　　　　　a.ul：unordered list，无序列表的意思。　　　　　　b.l...

felix0913 2019-04-23 11:49 评论0 收藏0
前端--HTML

摘要：注意后面的引号，分别在秒数的前面和网址的后面百度一下你就知道定义了网页标题，在浏览器标题栏显示。设置只有左右有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。HTML介绍 web服务本质 import socket sk = socket.socket() sk.bind((127.0.0.1, 8080)) sk.listen(5) while Tru...

番茄西红柿 2019-04-23 13:26 评论0 收藏0
HTML基础总结

摘要：细化知识点总结标签都是标题标签，定义一段话的标题，最大，依次递减，最小标题标签的作用让文本加粗显示段落标签标签用来显示一段文本图片，它会忽略源代码中的排版块元素独占一行的元素，和相邻的元素不能共享同一行所有的块元素都有属性和元素都是HTML细化知识点总结 1.h1-h6标签都是标题标签，定义一段话的标题，h1最大，依次递减，h6最小标题标签的作用：让文本加粗显示 2. 段落标签：p...

Jacendfeng 2019-04-23 11:54 评论0 收藏0

发表评论

登陆后可评论

0条评论

biaoxiaoduan

男|高级讲师

我要关注我要私信

TA的文章

利用Python实现黑客帝国代码雨，打造属于自己的黑客帝国

阅读 3637·2021-11-18 10:02
STM32入门学习经验总结

阅读 1691·2021-10-12 10:12
腾讯云，轻量应用服务器免费升级，219元/3年，2核/4G内存/60gSSD/6M带宽，可选wind

阅读 3114·2021-10-09 09:53
Anaconda+CUDA+cuDNN+Tensorflow2.0环境搭建

阅读 5314·2021-09-09 09:34
⚡每日肥学⚡——算法&面试题3️⃣

阅读 1086·2021-09-06 15:02
酷锐云：清凉夏日促销，全场八折，香港三网cn2 gia，月付24元起，香港安畅4C站群月付135元起

阅读 2875·2021-08-05 10:02
支付宝小程序之连接后端+详谈引入阿里icon图标

阅读 3288·2019-08-30 15:44
单页面web应用的滑动

阅读 3201·2019-08-28 18:04

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

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

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章