jq遍历table表demo
2024-08-28 10:50:48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="./jquery.min.js"></script>
<style>
table {
margin: auto;
}
.bottm {
width: 70px;
height: 30px;
background-color: #447fec;
color: #fff;
text-align: center;
line-height: 30px;
margin: auto;
}
</style>
</head>
<body>
<table>
<tr>
<td class="one1">
<input type="text">
</td>
<td class="one2">
<input type="text">
</td>
<td class="one3">
<input type="text">
</td>
</tr><tr>
<td class="one1">
<input type="text">
</td>
<td class="one2">
<input type="text">
</td>
<td class="one3">
<input type="text">
</td>
</tr><tr>
<td class="one1">
<input type="text">
</td>
<td class="one2">
<input type="text">
</td>
<td class="one3">
<input type="text">
</td>
</tr>
</table>
<div class="bottm">提交</div>
<script>
$(function () {
$('.bottm').on('click',function () {
$('table tr').each(function(index){//遍历所有tr元素
var data = [
$(this).find('td').eq().find('input').val(),
$(this).find('td').eq().find('input').val(),
$(this).find('td').eq().find('input').val(),
];
console.log(data);
})
}); }) </script>
</body>
</html>
最新文章
- 黑马程序员——C语言基础 char字符 数组
- 招聘高级.Net工程师
- CF 84D Doctor（二分）
- Cuckoo for Hashing_双哈希表
- php 递归创建目录、递归删除非空目录、迭代创建目录
- avalon---qunar ued
- IDEA 常见文件类型的图标介绍
- 主题：PageRank解释
- Emit
- url语法
- HTML中部分标签的嵌套问题
- hdu 3433 A Task Process 二分+dp
- property干嘛的
- JavaEESSM框架配置文件
- RabbitMQ的六种工作模式
- Docker（四）Dockerfile入门
- github总结(1)--怎样创建一个新的仓库
- C#微信公众号开发--网页授权(oauth2.0)获取用户基本信息一
- ORA-01654 ： 表空间不足
- noip做题记录+挑战一句话题解?