前端HTML,单击在table中某一行按钮，获得该行的数据

最新推荐文章于 2023-02-03 16:04:08 发布

lingle1

最新推荐文章于 2023-02-03 16:04:08 发布

阅读量1.3w

点赞数 9

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42245375/article/details/105687724

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

文章目录

效果

在这里插入图片描述

代码

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title> 页面名称 </title>
	</head>
	<body>
		<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
		<table id="tab">
			<tr>
				<td>aaaaa111</td>
				<td>aaaaa222</td>
				<td><input type="button" value="button" /></td>
			</tr>
			<tr>
				<td>bbbbb111</td>
				<td>bbbbb222</td>
				<td><input type="button" value="button" /></td>
			</tr>
			<tr>
				<td>ccccc111</td>
				<td>ccccc222</td>
				<td><input type="button" value="button" /></td>
			</tr>
			<tr>
				<td>ddddd111</td>
				<td>ddddd222</td>
				<td><input type="button" value="button" /></td>
			</tr>
		</table>
		<input type="text" id="text" />
		<script type="text/javascript">
			$(function() {
				$("#tab").on("click", ":button", function(event) {
					$("#text").val( $(this).closest("tr").find("td").eq(0).text() +"--"+$(this).closest("tr").find("td").eq(1).text());
				});
			});
		</script>
	</body>
</html>

参考：https://bbs.csdn.net/topics/392306236

补充，前一种按钮是input-button标签的，但是如果是button标签呢，该如何获取

只要js方法换成带参数的方法，调用参数的时候带上参数就行，不同情况不同用法，仅做记录，活学活用

ul+='<button onclick="pay(\''+regiId+'\')" >按钮</button>'   //此为原生JS页面拼接//此方式的关键就在于转义字符
//regiId 为变量 

<button onclick="pay('+regiId+')" >按钮</button> 

//regiId 为变量 

function pay(reg) {
 //reg 为变量，可随意 
 alert(reg)
 }

2次补充，这个没啥用，就记录下，应该能用到

<input type="button" name="modify" οnclick="aaa()" value="修改" />

function aaa(){
 var u_id = '你的id值';
 location.href = modifyUser.php？user=u_id
}



方法二



<input type="button" name="modify" οnclick="var u_id = document.getElementById('u_id').value;location.href='modifyUser.php？user=u_id';" value="修改" />

lingle1

关注

9
点赞
踩
25

收藏

觉得还不错? 一键收藏
14
评论
前端HTML,单击在table中某一行按钮，获得该行的数据

文章目录效果代码效果代码<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title> 页面名称 </title> </head> <body> <script type="text/jav...
复制链接

扫一扫