一、场景

传多个表格数据到后台

一般用 [] 这样定义name：

<input name="grade[]"/>
<input name="age[]"/>

这样的话后台处理起来比较麻烦，直接根据class定位到表格的内容，把表格数据组装成对象返回到后台

二、示例

1、表格图片

2、表格数据图片

3、代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>循环获取表格的数据</title><style>body{margin: 20px;}input{margin: 5px;}button{margin: 20px;}.border_distance{border-collapse: collapse;  /**设置小表格之间的间距为0*/border-right:1px solid red;border-top:1px solid red;}.border_distance tr td,th{border-left:1px solid green;border-bottom:1px solid green;}</style><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body><table class="border_distance"><thead><tr><th>姓名</th><th>年级</th><th>年龄</th></tr></thead><tbody><tr><td class="name">姓名1</td><td class="grade">年级1</td><td><input class="age" value="1"/></td></tr><tr><td class="name">姓名2</td><td class="grade">年级2</td><td><input class="age" value="2"/></td></tr><tr><td class="name">姓名3</td><td class="grade">年级3</td><td><input class="age" value="3"/></td></tr></tbody></table><button>查看表格数据</button>
</body>
<script>//按钮点击事件$('button').click(function () {let tableHtml = $(document).find('table.border_distance tbody tr');let data = getTableData(tableHtml);alert('表格的内容为：' + JSON.stringify(data) );//实际中把处理好的数据传到后台处理，如下：/*field.id = 1;field.users = data;$.ajax({url: '/index/.../...',type: 'POST',data: field,success: function(res) {//相关操作},error: function(res) {//异常提示}});*/});/*** 获取表格数据* @param tableHtml 表格Html* @returns {Array}*/function getTableData(tableHtml) {let result = [];if (tableHtml) {let length = tableHtml.length;for(let i = 0; i < length; i++) {   //追加数据let trData = {}; // 每行的数据//注意text()和val()的区别let name = $(tableHtml).eq(i).find('.name').text();let grade = $(tableHtml).eq(i).find('.grade').text();let age = $(tableHtml).eq(i).find('.age').val();//如果不存在给默认值（视情况而定）name = (name == undefined) ? '' : name;grade = (grade == undefined) ? '' : grade;age = (age == undefined) ? 0 : age;//数据赋值trData.name = name;trData.grade = grade;trData.age = age;result.push(trData);    //数据追加}}return result;}
</script>
</html>

Jquery获取表格tr对象，并循环获取表格内容相关推荐

jmeter根据循环获取参数_Jmeter--同线程组循环获取数据库数据传递请求
实例:同线程组从数据库内获取3个uid,把3个uid分别作为不同参数,循环传递给T票UI及发布朋友圈接口.最终结果分别请求了3次接口,并且每个接口请求uid均不一致 jmeter整体结构 1.连接数据 ...
jQuery 循环获取checkbox复选框的值，checkbox全选、全不选、反选
前端页面html <tr v-for="(log,index) in logList"><td>& ...
Jquery 获取日期date()对象，jquerydate
Jquery 获取日期date()对象,jquerydate 获取JavaScript 的时间使用内置的Date函数完成 var mydate = new Date(); mydate.getYear ...
html 表单内容怎么获取不到,jquery中formdate一直获取不到对象中的[0]的值包括本身也是一个空的数据怎么办？...
jquery中formdate一直获取不到对象中的[0]的值包括本身也是一个空的数据怎么办? 再做一个前台的ajax方法查网上用formdate方法上传.可是进了接口之后一直在控制台获取不到for ...
JQuery this和$(this)的区别及获取$(this)子元素对象的方法
1.JQuery this和$(this)的区别 // this其实是一个Html 元素. // $this 只是个变量名,加$是为说明其是个jquery对象. // 而$(this)是个转换,将th ...
jQuery根据ID、CLASS、等获取对象
jQuery根据ID.CLASS.等获取对象 Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) , 它兼容CSS3,还兼容各种浏览器 ...
导入excel表格到数据库、导入excel表格到数据库代码、根据excel表格路径将数据导入到数据库、验证要导入的excel表格数据、根据路径获取MultipartFile、FileItem文件
导入excel表格到数据库.根据路径导入excel表格到数据库代码.根据excel表格路径将数据导入到数据库.验证要导入的excel表格数据.根据路径获取MultipartFile.FileItem文 ...
day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式
回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...
php表格tr,jQuery+ajax实现动态添加表格tr td功能示例
本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: ajax部分: va ...
python网页爬虫循环获取_手把手教你用 Python 搞定网页爬虫
原标题:手把手教你用 Python 搞定网页爬虫编译:欧剃作为数据科学家的第一个任务,就是做网页爬取.那时候,我对使用代码从网站上获取数据这项技术完全一无所知,它偏偏又是最有逻辑性并且最容易获得的 ...

Jquery获取表格tr对象，并循环获取表格内容

目录

一、场景

二、示例

1、表格图片

2、表格数据图片

3、代码

Jquery获取表格tr对象，并循环获取表格内容相关推荐

最新文章

热门文章