如何提交table中的数据

Question

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

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

Answer 1

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)字符化就可以了

Answer 2

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

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

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

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

Answer 3

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