js獲取表格中的數(shù)據(jù) 以及表格中checkbox選中一行數(shù)據(jù)

biaoxiaoduan 發(fā)布于2019-08-19 17:57 / 1170人閱讀

摘要：獲取添加保存時數(shù)據(jù)提交的地址表中數(shù)據(jù)條數(shù)獲取獲取成績不為空的成績值獲取當(dāng)前節(jié)點的刷新列表含的表格有的情況下，沒被選中的那條記錄以及選中了但的為空的那條記錄都不必提交。

前言

不知道是不是大家也遇到過類似的表單，但我絕對是第一次見，如下圖所示，表單中包含了表格。

上圖中的表格數(shù)據(jù)是根據(jù)數(shù)據(jù)庫中學(xué)生表而變化的，這增加了獲取表中數(shù)據(jù)的復(fù)雜程度，這里僅僅是記錄js如何獲取數(shù)據(jù)傳值到后端的辦法，所以，僅以表格中張三、李四為例。

示例代碼 html


  
     
     課程
     
     
         
             
     
     

     
       
         
            序號
            學(xué)號
            姓名
            成績
         
       
       
            
       
    
  
    
     
       共
          頁/ 共
          條數(shù)據(jù), 每頁顯示
              條
           
              
                
                  «
                
              
              1
              
                
                 »

css就略了。。。

表格內(nèi)容加載：

function student_list(class_id,pageno){
    var size =$("#maxsize").val()?$("#maxsize").val():20;
    //Ajax 獲取添加框的學(xué)生信息分頁列表的 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模板引擎，你也可以用別的^_^
官網(wǎng) ：http://juicer.name/

含checkbox的表格

注意：html中表頭如下：

js中表格內(nèi)容如下：

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獲取表格中的數(shù)據(jù) 不含checkbox的表格

沒有checkbox的情況下，input的value為空的那條記錄不必提交。

      var url = "/server/score/info/add.json";//Ajax 獲取添加保存時數(shù)據(jù)提交的 URL 地址
      var ids = [ ];
      var score1s=[ ];
    //表中數(shù)據(jù)條數(shù)
      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);
             //獲取當(dāng)前節(jié)點的classId
            var class_id=curNode.id;
             //刷新列表
            exam_score_list(class_id,0);
         });

含checkbox的表格

有checkbox的情況下，沒被選中的那條記錄以及選中了但input的value為空的那條記錄都不必提交。

var url = "/server/score/info/add.json";//Ajax 獲取添加保存時數(shù)據(jù)提交的 URL 地址
      var ids = [ ];
      var score1s=[ ];
      var chkBoxes = $("#student-list").find("input:checked");
      if (chkBoxes.length == 0) {
        showDialog("請至少選擇一個學(xué)生");
          return false;
      }
      $(chkBoxes).each(function() {
        ids.push($(this).attr("id"));
      }); 
      var courseId =$("#add-course-id").val();
      for(var i=0;i
后記
可能寫的思路有些亂，看不懂，不是你原因，那一定是我寫的太差勁，表達不清晰。。。
由于這是公司項目里用到的，不可能貼完整代碼，所以，只言片語表達不清楚的地方，還請諒解^_^

云服務(wù)器 GPU云服務(wù)器 js中表格怎么選中一行數(shù)據(jù) js中獲取表格數(shù)據(jù) js點擊表格添加一行數(shù)據(jù) js表格復(fù)制最后一行數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79016.html

發(fā)表評論

登陸后可評論

0條評論

biaoxiaoduan

男|高級講師

我要關(guān)注我要私信

TA的文章

利用Python實現(xiàn)黑客帝國代碼雨，打造屬于自己的黑客帝國

閱讀 3491·2021-11-18 10:02
STM32入門學(xué)習(xí)經(jīng)驗總結(jié)

閱讀 1620·2021-10-12 10:12
騰訊云，輕量應(yīng)用服務(wù)器免費升級，219元/3年，2核/4G內(nèi)存/60gSSD/6M帶寬，可選wind

閱讀 3001·2021-10-09 09:53
Anaconda+CUDA+cuDNN+Tensorflow2.0環(huán)境搭建

閱讀 4893·2021-09-09 09:34
?每日肥學(xué)?——算法&面試題3??

閱讀 875·2021-09-06 15:02
酷銳云：清涼夏日促銷，全場八折，香港三網(wǎng)cn2 gia，月付24元起，香港安暢4C站群月付135元起

閱讀 2785·2021-08-05 10:02
支付寶小程序之連接后端+詳談引入阿里icon圖標(biāo)

閱讀 3146·2019-08-30 15:44
單頁面web應(yīng)用的滑動

閱讀 3129·2019-08-28 18:04

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

js獲取表格中的數(shù)據(jù) 以及表格中checkbox選中一行數(shù)據(jù)

相關(guān)文章