js获取表格中的数据 以及 表格中checkbox选中一行数据 您所在的位置:网站首页 js获取表格中的数据 js获取表格中的数据 以及 表格中checkbox选中一行数据

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

2023-08-11 06:15| 来源: 网络整理| 查看: 265

js获取表格中的数据 以及 表格中checkbox选中一行数据 biaoxiaoduan 发布于2019-08-19 17:57 / 936人阅读

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

前言

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

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

示例代码 html

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}", "", "${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 含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 后记

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

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

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

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

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

上一篇:前端学习笔记(CSS、JS基础篇) 下一篇:开发者对 npm 公司不满,unpublish 了自己的所有模块


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有