如何提交table中的数据

lalala233
  • 150

假如我数据库有一个学生成绩表,包含学生姓名和各科成绩。其中各科成绩通过提交如下图的表格添加给相应的学生。图片描述

请问需要什么样的HTML结构,JS或jQuery的处理,才能点一次提交按钮就能提交表格中所有的成绩信息,并且方便后台的处理呢??
求大神指导!

评论
阅读 6.2k
3 个回答

RE题主评论:
这样逻辑就正常了(和我在加分项里说的一致),一开始以为是传递死数据呢。
其实也不用input了,对于html结构优化来说,每个td里再放input,会增加页面大小并且会再设置input的css样式,所以设置td属性为 contenteditable="true" //H5新增
就可在上面回答的基础上达到最小修改。(但是考虑兼容的话还是得input)


以下是原回答

既然是面试题,注重的肯定是思路而不是具体,而思路是否清晰就是你对技能掌握情况的体现
对我而言,达到题目要求的步骤如下(顺便反向分析一波考点):
1.确定需求,是需要传递表格中的内容(考点1,明确需求)
2.封装表格的内容,因为我们现在看到的内容是立体的,所以需要将其扁平化,封装成程序能识别的数据,这点就涉及到数据结构的设计(考点2,数据结构设计)
3.如何取出内容并进行封装,这里无非是遍历表格tbody的tr和td,这就是对dom的操作了(考点3,dom操作)
4.根据后台处理数据的需要(贴合实际),以何种方式向后台传递(考点4,与后台同事的交流)

下面这点可以当做拓展和面试官进行交流,算是加分项,也是体现自己对交互的注重
向面试人员提问,为何需要从table中读取数据,了解真正的需求而不是操作需求后,才能更便于理解这么做的意义。
从个人经验来说,这个需求的目的一般是绑定在用户交互上,所以实际业务中应该是在td中以input展示数据,便于用户修改。如果数据都是自己提供的而用户不能修改,那么此数据传递回后台并无意义,因为是“死数据”。

数据结构建议如下,一个tr就代表一条记录,也就是对应数组中的一个元素,这样后台拿到后也可能很方便的存入数据库中。

var data = [{
    name:'x1',
    yuwen: 75,
    math: 66
},{
    name:'x1',
    yuwen: 75,
    math: 66
}]
 

然后发送请求的时候将其JSON.stringify(data)字符化就可以了

主要看你传给后端是什么结构嘛
无非就是把数据拿出来拼在一起

可以点击提交的时候遍历每个tr里面的input,把value取出然后ajax提交

或者粗暴一点直接再外面弄个form表单提交掉

重点是你要设计好给后面什么样的数据

常用的无非就是ajax或者表单。
让后台写好接口给你 不然怎么知道提交到哪里 数据格式需要什么样的

宣传栏