获取表格内所有内容，包括input输入框的内容

最新推荐文章于 2022-10-29 13:16:01 发布

万德佛

最新推荐文章于 2022-10-29 13:16:01 发布

阅读量1.2k

点赞数

分类专栏： JavaScript HTML 文章标签： JavaScript HTML

本文链接：https://blog.csdn.net/qq_39251440/article/details/103832928

版权

JavaScript 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

HTML

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>new document</title>
		<meta name="generator" content="editplus">
		<meta name="author" content="">
		<meta name="keywords" content="">
		<meta name="description" content="">
	</head>

	<body>
		<table width="60%" border="1" cellpadding="0" cellspacing="0" id="tableDiv" style="text-align: center;">
			<tr>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>身高</td>
			</tr>
			<tr>
				<td>张三</td>
				<td><input type="text" value="男"/> </td>
				<td><input type="text" value="21"/></td>
				<td><input type="text" value="170"/></td>
			</tr>
			<tr>
				<td>小红</td>
				<td><input type="text" value="男"/> </td>
				<td><input type="text" value="19"/></td>
				<td><input type="text" value="168"/></td>
			</tr>
		</table>
		<div> <button onclick="save()">获取表格内容</button> </div>
		
        //需要引入jquery
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<script language="javascript">
			//获取表格中所有内容
			function save() {
				var listdt = new Array();
				$('#tableDiv tr').each(function(i) {
					var objdt = new Object();
					$(this).children('td').each(function(j) { // 遍历 tr 的各个 td
						if (i == 0) {
							//第一行标题
							objdt[j] = $(this).text();
						} else {
							if (j < 1) {
								// $(this).text() 获取的说td内容
								objdt[j] = $(this).text();
							} else {
								//$(this).find("input").val()查找的input内容
								objdt[j] = $(this).find("input").val();
							}
						}
					});
					listdt.push(objdt);
				});
				console.log(listdt)
			}
		</script>
	</body>
</html>

万德佛

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
获取表格内所有内容，包括input输入框的内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>new document</title> <meta name="generator" content="editplus"> <meta...
复制链接

扫一扫